Question

我正在尝试将图像自动调整到它的容器，同时使用css保持其宽高比。图像的高度太高，无法放在手机屏幕上。我正在使用这个css，它似乎应该可以工作，但它只调整图像的宽度变化，而不是高度。

body {
    background-color: #0055AF;
    overflow-x: visible;
}

#new_site_teaser {
    width: 405px;
    height: 683px;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
}

#new_site_teaser img{
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

这是一个小提琴：http://jsfiddle.net/7m50rg74/

任何帮助都将不胜感激。

Answer 1

将#new_site_teaser宽度更改为％并定义父级的高度和宽度（在本例中为body＆amp; html）;它会适应每个设备。它比使用像素要好得多。请参阅更改：http://jsfiddle.net/7m50rg74/16/

确保您有一个元视口。

如果没有，请将此添加到您的头标记中。这为您的网站定义了一个视口，在这种情况下，它会自动调整每个设备的宽度，并且缩放比例为1（缩放）。

<meta name="viewport" content="width=device-width, initial-scale=1">

使用css在div中自动调整图像只能使用宽度，而不是高度

1 个答案: