首页 文章

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

提问于
浏览 次
1

我想知道这是否可能 .

我有一个内容区域，我打算在其中放一张图片 . 如果它放入宽度为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％放在同一个元素中，因为不保留纵横比 .

image resize width css

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>
    回复于
  • 0
    div img{   max-width: 100%; 
            max-height: 100%; 
        }
<div>
    <img src="">
</div>

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

    回复于

相关问题