Question

我想知道这是否可能。

我有一个内容区域，我打算在其中放一张照片。如果它放入宽度为100％的容器后低于800px高，那么我希望它留在那里。如果它在宽度100％之后超过800px高，我希望它忽略宽度：100％线并读取最大高度线（或做一些缩小宽度的百分比），直到它小于800px高，同时保持它的纵横比。

实施例。我有一个700px的容器宽度，600px宽，400px高的图片，由于宽度：100％，它将显示在700px宽x500px高。

实施例。我的容器宽度为700px，图片宽400像素x高600像素。现在它将显示为700px宽900px高，宽度：100％代码，但我想要一段代码，看到它超过800px高的最大高度，因此触发一些东西，使宽度： 100％被忽略，而不是最大高度：800px线，这将使图片600px宽x 800px高。

我不能将max-height和width：100％放在同一个元素中，因为不会保留宽高比。

Answer 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>

Answer 2

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

通过这些提示，您可以获得类似于facebook的容器。抱歉，我说西班牙语......

图像大小调整 - 最大高度为100％

2 个答案: