图像大小调整 - 宽度 100%，最大高度答案

【问题标题】：Image Resizing - Width 100% with Max Height图像大小调整 - 宽度 100%，最大高度
【发布时间】：2013-04-28 10:39:49
【问题描述】：

我想知道这是否可能。

我有一个内容区，我要在里面放一张图片。如果放入宽度为 100% 的容器后高度小于 800 像素，那么我希望它留在那里。如果它在宽度 100% 之后超过 800px 高，我希望它忽略 width:100% 行并读取 max-height 行（或做一些事情来缩小宽度的百分比），直到它小于 800px 高，同时保持它的纵横比。

例如。我有一个 700 像素宽度的容器，图片 600 像素宽 x 400 像素高，由于宽度：100%，它将显示为 700 像素宽 x 500 像素高。

例如。我有一个 700 像素宽度的容器，图片是 400 像素宽 x 600 像素高。现在它将显示为 700px 宽 900px 高，宽度为：100% 代码，但我想要一段代码，它看到它超过了 800px 高的最大高度，因此触发了一些东西，使得宽度： 100% 被忽略，而是离开 max-height:800px 行，这将使图片变为 600px 宽 x 800px 高。

我不能将 max-height 和 width:100% 放在同一个元素中，因为这样就不会保留纵横比。

【问题讨论】：

提供代码或jsFiddle 将使您的问题更容易回答
怎么把图片放到内容区呢？您可以使用 javascript / jquery 读取图像大小并操作您的 css。
这是一个论坛，所以图片会通过cmets放入。
你不能在每张图片上设置height: auto 和width: 100% 吗？这应该保持您的纵横比并自动按比例缩放图像。我总是尽量让浏览器为我做尽可能多的工作。

标签： image resize width css

【解决方案1】：

我不相信你可以用 CSS 做到这一点。我尝试用一些简单的 JS 来做，效果很好：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
div {width: 700px; background: #e7e7e7;}
img {width: 100%;}
</style>

</head>
<body>

<div>
    <img src="600x400.jpg" >
    <br>
    <br>
    <img src="400x600.jpg">
</div>

<script>
window.onload = imgSizer;
function imgSizer() 
{
    "use strict";
    var d = document, imgs, i, ii;
    imgs = d.getElementsByTagName("img");
    for (i=0, ii=imgs.length; i<ii; i+=1)
    {
        if (imgs[i].height > "800")
        {
            imgs[i].setAttribute("style", "height:800px; width: auto;");
        } else {
            imgs[i].style.maxWidth = "100%";
        }
    }
}
</script>
</body>
</html>

不过，我对 JS 完全陌生，所以可能有更好的方法来做到这一点。您也可以在此处查看示例：http://codepen.io/anon/pen/EsIBi

如果您愿意，可以使用一些 jQuery 来解决这个问题：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
#content {width: 700px; background: #e7e7e7;}
img {width: 100%;}
</style>

</head>
<body>

<div id="content">
    <img src="http://pageaffairs.com/sp/so-16368859/600x400.jpg" >
    <br>
    <br>
    <img src="http://pageaffairs.com/sp/so-16368859/400x600.jpg">
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var imgs = $("#content").children('img');
    for (var i=0, ii=imgs.length; i<ii; i+=1)
    {
        if (imgs[i].height > "800")
        {
            imgs[i].setAttribute("style", "height:800px; width: auto;");
        } else {
            imgs[i].style.maxWidth = "100%";
        }
    }
});
</script>
</body>
</html>

【讨论】：

【解决方案2】：

div img{   max-width: 100%; 
            max-height: 100%; 
        }
<div>
    <img src="">
</div>

通过这个技巧，您可以获取类似于 facebook 的容器.. 对不起，我说西班牙语......

【讨论】：