如何在保持图像的长宽比的同时拉伸图像以填充<div>?


201

我需要将此图像拉伸到最大可能的大小,而不会溢出<div>图像或使图像倾斜。

我无法预测图像的纵横比,因此无法知道是否使用:

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

要么

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

我不能同时使用两者(即style =“ width:100%; height:100%;”),因为那样会拉伸图像以适合<div>

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


2
如果您需要图像将高度或宽度填充到div的相应尺寸,则只能考虑使用javascript。这是您渴望探索的东西吗?
okw

Answers:


189

2016年更新:

现代浏览器的性能要好得多。您需要做的就是将图像宽度设置为100%(demo

.container img {
   width: 100%;
}

由于您不知道纵横比,因此必须使用一些脚本。这是我使用jQuery(demo)的方法:

的CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

的HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

脚本

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

用户可以在调整大小之前看到图像吗?有人测试过吗?
2011年

解决方案几乎是正确的,您只需要反转CSS中的高度和宽度即可:如果图像为“高”,则宽度应为高度的100%,而不是高度(将变大并溢出)。反之亦然。
mbritto 2012年

@mbritto:是的,我不得不将CSS更改为最大宽度/高度,并添加了一个演示
Mottie 2012年

@Mottie有一种方法可以将宽度为930 px的图像适合到960 px的容器中,而不会损失图像质量
Vivek Dragon 2012年

15
为什么这是公认的答案。问题是图像对于容器来说太小了。也就是说,如何缩放图像以填充其容器的宽度或高度,而又不会增加图像的长宽比。另外,在演示中,删除width:autoheight:auto属性不会影响图像的显示。实际上,在要应用于图像的所有属性中,仅max-width: 100%具有任何作用,并且仅影响风景图像。但最重要的是,您的答案无助于缩小小图像以填充较大的容器。
2015年

78

仅使用CSS和有一种更简单的方法HTML

HTML:

<div class="fill"></div>

CSS:

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

这会将您的图像作为背景,并对其进行拉伸以适合div尺寸而不会变形。


图片数量不确定是否有可能?
TrtG '16

background-size: cover;是真正的魔力,它是CSS3,但在最新版本上具有合理的浏览器支持(请参阅:w3schools.com/cssref/css3_pr_background-size.asp
Jon Kloske

1
为了分隔样式和内容,可能值得在HTML中包含图像url,即<div style="background-image: url('path/to/image.jpg');" class="fill"></div>
binaryfunt

background-size: cover 如果不保持宽高比,则会裁切与元素不成比例的图像部分。参考此处
Alex_Zhong

@Alex_Zhong,您误解了宽高比。长宽比意味着图像不会在任何方向上拉伸(因此,理想的圆形在宽度或高度上都不会变成椭圆形)。裁剪可能是保持纵横比的必要部分(就像在OP的用例中一样)。
杰里米·莫里茨

70

这不是一个完美的解决方案,但是此CSS可能会有所帮助。缩放是使此代码起作用的原因,并且从理论上讲,该因子应为无穷大才能理想地适用于小图像-但在大多数情况下,使用2、4或8效果很好。

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}

1
我希望这可以在Firefox中使用。为什么没有zoomFirefox的爱!?
2015年

1
Firefox仍未zoom实现,但是这里有bug链接供以后参考:bugzilla.mozilla.org/show_bug.cgi?id=390936
Adam Taylor

31

如果可以,请使用背景图像并进行设置background-size: cover。这将使背景覆盖整个元素。

的CSS

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

如果您坚持使用嵌入式图像,则有一些选择。首先,有

对象拟合

此属性作用于图像,视频和与相似的其他对象background-size: cover

的CSS

img {
  object-fit: cover;
}

可悲的是,对于不支持IE 11的IE ,浏览器支持并不是那么好。下一个选项使用jQuery

CSS + jQuery

的HTML

<div>
  <img src="image.png" class="cover-image">
</div>

的CSS

div {
  height: 8em;
  width: 15em;
}

自定义jQuery插件

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

像这样使用插件

jQuery('.cover-image').coverImage();

它将拍摄图像,将其设置为图像的包装元素上的背景图像,然后img从文档中删除标签。最后,您可以使用

纯CSS

您可以将其用作备用。图像将按比例放大以覆盖其容器,但不会按比例缩小。

的CSS

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

希望对大家有帮助,编码愉快!


我一直在寻找一种纯粹的CSS解决方案,以使图像填充给定的容器而不使用background-image和background-size,并且这里的CSS代码非常适合> = IE9和现代浏览器。这里的CodePen演示
FLOQ Design 2015年

Pure CSS中,我删除min-并更改为width: 100%; height: 100%;工作!很棒的解决方案!+1谢谢!
Guilherme Nascimento

1
background-size: contain如果您不希望剪切任何图像,此功能也很有用。
Ponkadoodle

您可以添加zoom:0.001到Pure CSS解决方案以按比例缩小。
Ivor Zhou


12

更新2019。

现在,您可以使用object-fit接受以下值的css属性:fill | contain | cover | none | scale-down

https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

例如,您可能有一个容纳图像的容器。

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;

7

仅使用HTML和CSS,或者至少具有异国情调和复杂性,这是不可能的。如果您愿意添加一些JavaScript,下面是使用jQuery的解决方案:

$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

这将调整图像的大小,以使其始终适合父元素,而不管其大小如何。而且,当它绑定到$(window).resize()事件时,当用户调整窗口大小时,图像将进行调整。

这不会尝试将图像居中放置在容器中,这是可能的,但是我想那不是您要追求的。


4
我假设$ img.parent(); 应该真的是$ i.parent();
Jimbo Jonny 2012年

5

设置外部containerdiv的宽度和高度。然后在img上使用以下样式:

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

这将帮助您保持img的宽高比


6
它不会填满div。
Sven van den Boogaart 2014年

5

如果要在保持图像纵横比的同时设置最大宽度或高度(以便不会太大),则可以执行以下操作:

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

4

我碰到了这个问题,寻找一个类似的问题。我正在制作一个响应式设计的网页,并将放置在页面上的元素的宽度设置为屏幕宽度的百分比。高度设置为vw值。

由于我使用PHP和数据库后端添加帖子,因此纯CSS成为不可能。但是,我确实发现jQuery / javascript解决方案有点麻烦,因此我想出了一个简洁的解决方案(至少我认为自己是这样)。

HTML(或php)

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}
<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

通过使用style =“”,PHP可以动态更新我的页面,并且CSS样式与style =“”一起最终将显示在一个完全覆盖的图像中,并缩放以覆盖动态div标签。



4

为了使此图像拉伸到最大尺寸而不会溢出或歪曲图像。

应用...

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

图像的样式。


3

使用此方法,您可以用不同的div和图像比率来填充div。

jQuery的:

$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});

HTML:

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

CSS:

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}

3

这对我有用

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

2

如果您使用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)}兼容的方法?谢谢


进行了更改,找到了我的问题的答案!不,它将对某人有所帮助。背景图片:url(images / menu.png); 背景重复:不重复;位置:绝对;背景尺寸:300px;高度:100%; 宽度:100%; 您可以使用javascript或jquery更改background-size的值(.attr({'style':'background-size:150px auto; left:50px; top:50px;'}))
aleXela 2013年

2

我有类似的问题。我只用CSS解决了它。

基本上Object-fit: cover可以帮助您完成在div内放置图像时保持纵横比的任务。

但是问题Object-fit: cover不是在IE中有效,而是100%的宽度和100%的高度,并且纵横比失真。换句话说,我没有在镀铬中看到图像缩放效果。

我采取的方法是将图像绝对放置在容器内 ,然后使用组合将其放置在中心位置

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

一旦它进入中心,我就给图像,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

这使图像获得Object-fit:cover的效果。


这是上述逻辑的演示。

https://jsfiddle.net/furqan_694/s3xLe1gp/

此逻辑适用于所有浏览器。


1

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

...如果要设置或更改图像(以#foo为例):

jQuery的:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";

1

此处找到的许多解决方案都有一定的局限性:有些不能在IE(适合对象)或较旧的浏览器中使用,其他解决方案不能按比例放大图像(仅缩小图像),许多解决方案不支持调整窗口大小,许多解决方案不支持缩放窗口。非通用,期望修复分辨率或布局(纵向或横向)

如果使用javascript和jquery没问题,那么我有基于@Tatu Ulmanen代码的此解决方案。我修复了一些问题,并添加了一些代码,以防图像被动态加载并且开始时不可用。基本上,想法是有两个不同的css规则并在需要时应用它们:一个是当限制为高度时,因此我们需要在侧面显示黑条,而当其他规则是宽度时,则要使用css规则,因此我们需要在顶部/底部显示黑条。

function applyResizeCSS(){
    var $i = $('img#imageToResize');
    var $c = $i.parent();
    var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();  
    if(i_ar > c_ar){
        $i.css( "width","100%");
        $i.css( "height","auto");          
    }else{
        $i.css( "height","100%");
        $i.css( "width","auto");
    }
}   
var Oriwidth,Oriheight;
$(function() {
    $(window).resize(function() {
        applyResizeCSS();
    });

    $("#slide").load(function(){
        Oriwidth  = this.width,
        Oriheight = this.height; 
        applyResizeCSS();
    }); 

    $(window).resize();
}); 

对于像这样的HTML元素:

<img src="images/loading.gif" name="imageToResize" id="imageToResize"/> 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.