Question

如果有人读到这个，请注意这里实际上没有问题。这个问题可以关闭。如果图像的最大宽度或最大高度大于其初始大小，则初始大小优先，大小将根据其最大属性进行约束。

我有一个图像会自动调整大小，保持其宽高比，同时在其容器内垂直和水平对齐。

我想确保它的高度和宽度不超过它所在容器的100％。

但是，我还要保证图片的大小不会超过其实际宽度，因此不会降低质量。

如何同时应用max-width：100％AND max-width：250px？

以下是我目前的代码。

<div class="cell-inner" style="text-align:center;">
    <span style="vertical-align:middle; display:inline-block; height:100%; "></span>
    <img style="max-height:100%; max-width:100%; vertical-align:middle;" src="...">
</div>

我想指出这个问题类似于：CSS width 100% OR max-width in pixels但是，不一样。我无法将宽度和高度值设置为100％，因为这会强制图像丢失其比率。

Answer 1

您实际上并不需要做任何事情，因为您当前的代码应该完全按照您的要求执行。将max-width和max-height添加到图像会限制宽度和高度，但绝不会导致它们超出图像的初始尺寸。因此，如果需要，图像会缩小，但永远不会增长，正如您所问的那样。

Answer 2

非常简单：

img{width:100%; height:auto; max-width:250px;}

在这里你说：“让这个图像尽可能宽，保持其比例高度，但是，让我们不要超过250px宽度”。由于高度仍然是自动的，高度比例仍将按预期保持

修改

由于问题不明确，不同的情景

img{height:100%; width: auto;}

在这种情况下，图像将尽可能高，并且显然尽可能宽。当我们有大量未知大小的肖像图像时效果很好。

img{max-width: 100%; height:auto; max-height:200px !important; }

在这种情况下，图像将按比例高度调整为100％宽度。但是，如果高度达到200px，则宽度将按比例调整

Answer 3

虽然更复杂，但您也可以使用Javascript执行此操作。它允许您动态调整图像大小，例如当浏览器窗口改变大小时。此示例使用最大高度400 px，最大宽度250 px。现在它是静态的，但您可以轻松地将其考虑到窗口大小等动态变化。请记住，除非你打算动态地做一些事情，否则James Montagne的回答是正确的。

    var imageID = //ID of image in question goes here
    var newWidth;
    var newHeight;
    var maxHeight = 400;
    var maxWidth = 250;
    var imgDOM = $('#' + imageID);
    var imgHeight = imgDOM[0].naturalHeight;
    var imgWidth = imgDOM[0].naturalWidth;
    if(imgHeight <= 400) {
        if(imgWidth <= 250) {
            newWidth = imgWidth;
            newHeight = imgHeight;
        }
        else {
            newWidth = 250;
            newHeight = imgHeight * newWidth / imgWidth;
        }
    }
    else {
        newHeight = 400;
        newWidth = imgWidth * newHeight / imgHeight;
        if(newWidth <= 250) {
            //do nothing
        }
        else {
            newWidth = 250;
            newHeight = imgHeight * newWidth / imgWidth;
        }
    }
    imgDOM.attr("width", newWidth);

如何指定BOTH max-width％和px

3 个答案: