[分享]css中对img设置宽度不管用

在CSS中，经常用到设置图片宽度的属性，如“width: 100;”或“width: 200px;”，但有时在实际应用中，这些属性似乎并没有起到作用，图片的宽度仍然会保持原始尺寸。下面我们来探讨一下这...

在CSS中，经常用到设置图片宽度的属性，如“width: 100%;”或“width: 200px;”，但有时在实际应用中，这些属性似乎并没有起到作用，图片的宽度仍然会保持原始尺寸。下面我们来探讨一下这种情况出现的原因以及解决方法。

img {
    width: 100%;
} 

首先，我们需要明确一点，图片的宽度默认是根据其原始尺寸来显示的。如果我们的图片原始尺寸比较大，那么即使我们在CSS中设置了宽度，图片也不会缩小。因此，要想让宽度设置生效，我们需要针对不同的情况采用不同的解决方案。

一种常见情况是，我们的图片放在了一个包含块中，而这个包含块并没有设置宽度。这时候，我们可以尝试给包含块添加一个width属性，同时把图片的宽度设置为100%。代码如下：

.container {
    width: ***px;
}
img {
    width: 100%;
} 

另一种情况是，我们的图片实际上是一个背景图片，而我们采用的是img标签来进行替代。这时候，我们需要把img标签的display属性设置为“block”，并在CSS中使用background-image来设置背景。

img {
    display: block;
    width: 100%;
    background-image: url('path/to/image.jpg');
} 

最后，我们还可以考虑采用一些CSS预处理工具来处理这种情况。比如在Less中，我们可以使用以下代码来自动计算图片的宽度：

img {
    width: percentage(@width / @container-width);
} 

总之，如果我们遇到了图片宽度设置不管用的情况，不要放弃，要多尝试一些解决方案，相信总会找到适合自己的方法。