css图片宽高为什么标在自身

在网页设计中，CSS不仅可以美化文字，也能美化图片。样式表中指定图片宽高的常见方式有两种：在HTML标签中使用width和height属性定义图片大小，或者在CSS中使用width和height样式属性给图片指定宽高。

例1：HTML标签指定宽高img src="example.jpg" width="200" height="100">
例2：CSS样式指定宽高img{
        width:200px;
        height:100px;
}
    

那么，这两种方式有什么不同？

首先，使用HTML标签中width和height属性指定图片大小时，图片会在浏览器中按照设定的宽高显示，而不管实际图片的像素大小。这会导致图片变形或者拉伸失真，影响美观度。

其次，使用CSS样式设置宽高会保持图片原有的宽高比例，不会影响图片的清晰度。在实际运用中，我们通常将图片的宽度设置为100%或是固定宽度，然后高度自适应。这会让图片在不同的设备上自适应屏幕大小，变得更具灵活性。

总之，在网页设计中，使用CSS样式设置图片宽高比原始HTML标签中设置宽高更为稳妥，也能更好地保持图片清晰度和美观度。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！