Question

我有三张需要调整大小的.svg图像。由于某些原因，除非屏幕非常小，否则它们不会调整大小。

HTML：

<div class='au-images'>
    <div class='computer'>
        <p data-sr style='max-width: 180px;'><img src='images/computericon.svg'></p>
    </div>

    <div class='tablet'>
        <p data-sr='wait 0.5s' style='max-width: 180px;'><img src='images/tableticon.svg'></p>
    </div>

    <div class='phone'>
        <p data-sr='wait 1s' style='max-width: 180px;'><img src='images/phoneicon.svg'></p>
    </div>

我也在使用滚动显示，它解释了'data-sr'标签。

我的CSS：

.computer,.tablet, .phone {
max-width: 33%;
display: inline-block;
padding: 0em 2.5em;
}

.computer img, .tablet img, .phone img {
    max-width: 100%;
    height: auto;
}

有人可以向我解释为什么我的图片不会调整大小吗？

Answer 1

问题是您没有在图像的父元素上设置width。 CSS无法计算最大宽度的最大宽度，因此它使用它所知道的唯一宽度的最大宽度，即正文。

Your code in a fiddle（修改后显示一些实际图片）

所以解决方法是给父div一个宽度而不是一个max-width。由于您使用了填充，我还更改了框大小以包含它。

box-sizing: border-box;
width: 30%;

Updated code in a fiddle

请注意我将宽度减小到30％，因为div之间有空格;如果占33％，则总宽度将为99％加上这两个空格的宽度，这可能会超出窗口如果您不想这样，请删除内部div之间的所有空格。

Even more updated fiddle, now using widths of 33.33%

Answer 2

您可以尝试使用宽度单位vw。此单位是以百分比表示的视口宽度。即100vw是设备的全宽。看一下这个例子：http://jsfiddle.net/v929q8mn/1/

div.blablabla img {
    display: inline-block;
    margin: 0;
    width: 30vw;
}

most browsers支持。

图像不会使用CSS重新缩放

2 个答案: