3

I need to make the img tag width and height 100% inside overflow hidden div while maintaining the aspect ratio.

What I reached for is putting the image within overflow hidden div And the image is max-width 100% and auto height.

<div id="foo">
    <img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" />
</div>

but the problem i'm facing is not go height 100%

enter image description here

Look the code in action http://fiddle.jshell.net/TARwL/

And get close look at the div#cover is 100% width and height is perfect look and i would like to see my code do the same

I can't use the background-size:cover method because beside is not working in older browsers, I can't click right and save the image and this is important to me

4

5 回答 5

6

我重新考虑并找到适合我的解决方案，我不知道是否适合其他人！

图像将是背景大小的封面，同时我会将图像添加到同一个 div 内，宽度和高度为 100%，不透明度为 0

所以图像会像封面一样显示，任何人都可以点击同一区域并像正常一样使用图像（复制链接、下载等）

HTML

<div style="background-image:url(http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg)">
    <img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" />
</div>

CSS

 div{
        width: 300px;
        height: 300px;
        display:inline-block;
        vertical-align: top;
        background-size:cover;
        background-position:50% 50%;
    }

    div img{
        width: 100%;
        height: 100%;
        opacity: 0;
        /* OLD IE */
        zoom: 1;
        filter: alpha(opacity=0);
    }

代码在行动http://jsfiddle.net/Jim_Toth/mVtJc/1/

于 2013-09-17T00:26:44.167 回答
1

我认为您必须为此使用脚本。（除非您想使用居中的背景图片）

工作 Fidlle [尝试任何你想要的图像，具有不同的纵横比]

jQuery

var img = $("#foo > img");
var ratio = img.width() / img.height();
var limit = (100*ratio)+"%";
var margin = ((1-ratio)*50)+"%";

if( ratio > 1)
{
    img.css({"width": limit, "margin-left": margin});
}
else
{
    ratio = 1 / ratio;
    img.css({"height": limit, "margin-top": margin});
}

编辑：

这个小提琴一次支持多个图像（使用foo类）

于 2013-09-16T23:11:21.087 回答
0

另一个建议：jsFiddle

我真的不明白为什么不能使用背景图像！？
因此，只要包含 div 的宽度和高度保持不变，并且图像的纵横比保持在 4:3，您就可以使用示例代码。

如果任何值发生变化，您至少必须调整值left（可以使用 Javascript 轻松完成计算）。

不使用背景图像会使整个事情变得非常“脆弱”......，从语义的角度来看，它也是“不理想的”。

最好使用服务器端技术将图像裁剪为所需/需要的大小。

于 2013-09-16T23:53:14.993 回答
0

试试这个：（请注意，这仅在您使用具有相同纵横比的图像时才有效）

#foo img {
    width:133.33%;
    margin-left: -16.66%; /* crop img to the left: 33.33 /2 = 16.66 */
}

小提琴

解释：

您的图像是 1024 像素宽 X 768 像素高。所以宽高比= 1.333。

但是，您的overflow:hiddendiv 具有 1X1 的 raio - 因此图像将以 100% 失真。

因此，为了按比例显示图像 - 您需要将宽度增加 133%。

然后，为了使图像居中或“裁剪”以适合 div - 使用边距。

于 2013-09-16T22:33:55.183 回答
0

我认为应该是这样的：

.image-container {
    width: 169px; // May be auto
    height: 169px;
    position: relative;
    overflow: hidden;
    .image-wrap {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateY(0);
        transition: all .2s ease-in-out; //Run on IE
        height: 100%; // Height full frame
        img.scale {
            height: 100%;
            max-height: 100%;
            max-width: none !important; // To make sure that width of the image can be larger than its container.
        }
    }
}

HTML：

<div class="image-container">
    <div class="image-wrap"><img class="scale" src="your image path" /></div>
</div>
于 2017-05-18T13:14:42.523 回答