调整图像大小-宽度100%，最大高度
我想知道这是不是可能的。
我有一个内容区，我要在里面放一张图片。如果在宽度为100%的容器中放置后，它的高度小于800px，那么我希望它留在那里。如果它在宽度100%之后超过800px高，我想让它忽略width:100%行，并读取max-height行(或者做一些事情来缩小宽度的百分比)，直到它低于800px高，同时保持它的纵横比。
例如。我有一个700px的容器宽度，图片600px宽，400px高，它将显示在700px宽x 500px高，因为宽度:100%。
例如。我有一个700px的容器宽度，图片是400px宽x 600px高。现在它将显示为700px宽900px高，宽度:100%代码，但我想要一段代码，它看到它超过了800px高的最大高度，因此触发了一些东西，使得宽度:100%被忽略，而不是max- height :800px线，这将使图片变得600px宽x 800px高。
我不能把max-height和width:100%放在同一个元素中，因为这样长宽比就不会保持不变。
回答 2
Stack Overflow用户
发布于 2013-05-04 13:34:04
我不相信你可以用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>Stack Overflow用户
发布于 2014-12-02 05:54:00
div img{ max-width: 100%;
max-height: 100%;
}
<div>
<img src="">
</div>有了这个技巧，你就可以获得类似于facebook的容器。对不起，我会说西班牙语..。
https://stackoverflow.com/questions/16368859
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号