img添加固定宽高之后,是否一定要给父级标签添加超出隐藏

img添加固定宽高之后,是否一定要给父级标签添加超出隐藏,第1张

如果在CSS代码当中已经为img标签设置了固定宽高(像素值),且图像并没有圆角效果,那么可以不为父级元素添加超出隐藏;

如果img标签显示为圆角效果,可以针对img标签进行设置,此时,父级元素依旧可以不添加超出隐藏。;

在实际开发当中,将img标签设置为固定像素值并不是最佳的开发方法,比较合适的方式是将img标签的宽高设置为百分比,占满父级100%,扩展性会更强。此时,要保证父级元素有固定宽高,依旧可以不设置超出隐藏。

1、首先在编辑器建立了一个静态页面,在body中添加两个div,设置宽度,并设class 为div1和div2,在两个div的class 中添加相同的控制图片的class名为了 ”img“,并为div添加控制宽度的样式:

2、在两个div中加入相同的图片, 这个时候需要在img 类中加入css语句设置一下div的高度和宽度,以及div的边框,然后就可以设置img的样式了:

3、最后设置img的样式中图片的高度为auto,宽度为100%,这样就可以自适应浏览器了,来到浏览器,可以看到设置了自适应的图片自动填满整个div了,而没有设置的则是填充了一部分。以上就是让div自动适应自身的img高度:


欢迎分享,转载请注明来源:内存溢出

原文地址: https://www.outofmemory.cn/bake/11752242.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存