设置对应图片的width和htight的具体数值

JUMU实名认证 发表于 2018-11-01 22:29 | 显示全部楼层 | 复制链接分享      上一主题  翻页  下一主题
img{width:auto;height:auto;max-width:100%;max-height:100%;},这样设置图片可以使图片在指定的空间内缩放。

设置对应图片的width和htight的具体数值

设置对应图片的width和htight的具体数值


举例:
width:90px;(因为图片的width:100%)
height:90px(这里height是在width:100%被缩放后的尺寸。)
  1. <p><div style="width:90px;height:60px">
  2. <img ,src="a.jpg",>
  3. <!--这里我们假如图片的实际尺寸是320X320-->
  4. </div></p>
复制代码

我们可以发现这个90px的高度仍然超出了div的60px的高度,不符合max-height
这个时候,max-height:100%;就会发挥作用,
在max-height:100%;的作用下,图片被缩放后在div的尺寸是:
width:60px;
height:60px;这个尺寸符合max-height和max-width
实现图片比例缩放,就是不超出DIV设定的高宽显示等比例图片

  距米网  

找到您想要的设计

工程师、学生在线交流学习平台
关注我们

手机版- 距米网 |苏公网安备32041102000587号

© 2017-2024 常州居居米智能技术有限公司 苏ICP备18040927号-1