如何拉伸图像以填充<div>，同时保持图像的纵横比?

我需要使这张图像拉伸到最大尺寸，而不溢出它的<div>或倾斜图像。

我无法预测图像的纵横比，所以没有办法知道是否使用:

<img src="url" style="width: 100%;">

<img src="url" style="height: 100%;">

我不能同时使用(即style="width: 100%;高度:100%;")，因为这将拉伸图像以适应<div>。

<div>的大小由屏幕的百分比设置，这也是不可预测的。

当前回答

感谢CSS3

img
{
   object-fit: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

IE和EDGE始终是局外人: http://caniuse.com/#feat=object-fit

2016-04-18 12:15:59

其他回答

如果你使用IMG标签，这很简单。

我做了这个:

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}

但我不知道如何使它与#pic {background:url(img/menu.png)}一起工作 Enyone吗? 谢谢

2013-03-25 17:01:04

这招对我很管用

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

2016-11-18 16:16:10

设置外部容器div的宽度和高度。然后在img上使用下面的样式:

.container img{
    width:100%;
    height:auto;
    max-height:100%;
}

这将帮助你保持你的img的纵横比

2014-03-14 13:19:26

试试这个

HTML:

<div class="container"></div>

CSS:

.container{
background-image: url("...");
background-size: 100%;
background-position: center;
}

2021-02-20 14:07:05

如果你想设置一个最大宽度或高度(这样它就不会很大)，同时保持图像的纵横比，你可以这样做:

img{
   object-fit: contain;
   max-height: 70px;
}

2018-06-02 11:00:02

如何拉伸图像以填充<div>，同时保持图像的纵横比?

推荐文章

最新文章

标签