Html 如何指定最大宽度%和px

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

我有一个图像，将自动调整到其最大可能的大小，其宽高比保留，同时也被垂直和水平对齐在其容器内

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

但是，我还想保证图像的大小不会超过其实际宽度，因此不会丢失质量。

如何应用最大宽度：100%和最大宽度：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>

我想指出的是，这个问题类似于：但是，不一样。我无法将宽度和高度值设置为100%，因为这将迫使图像可能丢失其比率。

非常简单：

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

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

编辑

由于问题不清楚，不同的场景

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

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

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

---

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

您实际上不需要执行任何操作，因为当前代码应该完全按照您的要求执行。将

max width

和

max height

添加到图像将限制宽度和高度，但不会导致它们增加到图像初始尺寸之外。因此，如果需要，图像将缩小，但永远不会增长，正如您所要求的那样。

虽然更复杂，但您也可以使用Javascript实现这一点。它允许您动态调整图像大小，例如当浏览器窗口更改大小时。此示例使用的最大高度为400 px，最大宽度为250 px。现在它是静态的，但是你可以很容易地让它考虑到动态变化，比如窗口大小。请记住，除非你计划动态地做某事，否则詹姆斯·蒙塔涅的答案是正确的

    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);

var-imageID=//此处是所讨论图像的ID
新宽度；
var newHeight；
var maxHeight=400；
var maxWidth=250；
var imgDOM=$（'#'+imageID）；
var imgHeight=imgDOM[0]。自然高度；
var imgWidth=imgDOM[0]。自然宽度；
如果（依我看，我想你应该做的是最大宽度：250px，而宽度：100%，这将使它100%达到250px。但是你可能不应该在图像上指定高度和宽度，它可能会被拉伸或挤压。@ntgCleaner问题是，我必须将宽度和高度都设置为100%。但是，这可能会导致图像像你一样u建议，失去它的比率。图像所在的容器是有弹性的，根据浏览器的宽度和高度可以是任何高度或宽度。因此，如果容器与图像的比率不同（通常情况下不会是99.9%）我将有一个扭曲的图像。似乎仅仅将最大值设置为100%就足够了。它将限制大小，但不会强制它增长。或者我在这里缺少一些细节吗？@JamesMontagne如果容器足够大，图像容器的大小将大于图像的实际大小。图像将是png和thus如果它的大小调整到大于其原始大小，它将变得模糊。@詹姆斯蒙塔涅谢谢…我没有意识到这一点。这解决了我的问题-没有问题。thanksI可能不应该如此强调宽度，因为在某些情况下，高度将填满容器，而宽度将不是100%。这个解决方案只有当容器中的可用空间足够大，宽度足以填满其容器的宽度时，此选项才有效。但是，如果容器又短又胖，则图像将不适合整个宽度，应调整为100%的高度，并相应地调整宽度。您的问题不是很清楚，因为我不理解图像将超出其边界，但如果它是我所想的，那么请尝试相反的方法：
高度：100%；宽度：自动；
感谢您的帮助……这就是我的意思：我怀疑图像将超出其初始实际大小，并增长到适合容器的大小，但事实并非如此你后来编辑了真正的问题是什么，这就是为什么我和其他人如此困惑的原因我没有改变这个问题我只是在顶部加了一点