1

我想知道这是否可能。

我有一个内容区，我要在里面放一张图片。如果放入宽度为 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% 放在同一个元素中，因为这样就不会保留纵横比。

4

2 回答 2

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>
于 2013-05-04T05:34:04.280 回答
0 
div img{   max-width: 100%; 
            max-height: 100%; 
        }
<div>
    <img src="">
</div>

有了这个提示，您可以获得类似于 facebook 的容器。对不起，我说西班牙语...

于 2014-12-01T21:53:59.793 回答