缩放图像以适合边框


117

是否存在仅将CSS缩放到边框(保持纵横比)的css解决方案?如果图像大于容器,则此方法有效:

img {
  max-width: 100%;
  max-height: 100%;
}

例:

但是我想按比例放大图像,直到尺寸为容器的100%。


您是说像高度:100%和宽度:100%吗?您有想要达到的理想尺寸吗?否则,您也可以拉伸图像并强制其达到这些尺寸。
mikevoermans 2012年

@mikevoermans看我的第一个示例:我要拉伸图像,直到其中一个尺寸为100%,另一个尺寸为<= 100%
Thomas Guillory 2012年

@jacktheripper当然要保持宽高比……
Thomas Guillory'4

@gryzzly这些例子说明了一切!如果他们看过这些例子,那是显而易见的。
Thomas Guillory'4

@Artimuz我完全不同意。对您的问题(包括我的问题)的三个答案表明这并不明显。
Khan

Answers:


94

注意:尽管这是可接受的答案,如果您可以选择使用背景图片,则以下答案更为准确,并且所有浏览器目前都支持以下答案

不,没有双向的唯一CSS方式。您可以添加

.fillwidth {
    min-width: 100%;
    height: auto;
}

对于一个元素,使其始终具有100%的宽度,并自动将其高度缩放为长宽比,反之:

.fillheight {
    min-height: 100%; 
    width: auto;
}

始终缩放到最大高度和相对宽度。为此,您需要确定纵横比是高于还是低于容器,而CSS无法做到这一点。

原因是CSS不知道页面的外观。它会预先设置规则,但只有在此之后,元素才会被渲染,并且您确切知道要处理的大小和比率。检测到该错误的唯一方法是使用JavaScript。


尽管您不是在寻找JS解决方案,但如果有人需要,我还是会添加一个。用JavaScript处理此问题的最简单方法是根据比率差异添加一个类。如果框的宽高比大于图像的宽高比,请添加类“ fillwidth”,否则添加类“ fillheight”。


7
实际上有一个解决方案:将CSS3的background-size设置为contains。看我的答案。
Thomas Guillory'4

你完全正确。即使现在已经一年半了,我还是编辑了我的帖子。
Stephan Muller 2013年

4
我认为这是所问问题的正确答案,即img标签的CSS是什么。这是相关的,因为在语义上img标签是内容,而作为div背景的图像则不是。虽然有些情况使这种做法不切实际(如果您不了解图像与容器的比率),但对于其他情况则是正确的。谢谢。
duncanwilcox

173

感谢CSS3,有一个解决方案!

解决方案是将图像放置为background-image,然后将设置background-sizecontain

的HTML

<div class='bounding-box'>
</div>

的CSS

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

在这里测试: http //www.w3schools.com/cssref/playit.asp?filename= preval=contain

与最新浏览器完全兼容:http : //caniuse.com/background-img-opts

要将div对准中心,可以使用以下变化形式:

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

1
不错,尽管我的回答不是正确的(您只是在询问有关img的问题),但这是一个很好的解决方案,我应该考虑一下。唯一的问题是IE 8仍被广泛使用,以至于我还不想依赖于此,但是仍然可以很好地抓住它。
Stephan Muller

6
如果您不希望使用任何标题框,请将其设置为“ cover”。
arxpoetica 2012年

3
请注意,您可以使用HTML:注入图像URL <div class=image style="background-image: url('/images/foo.jpg');"></div>。所有其他样式应与CSS一起使用。
Andrey Mikhaylov-lolmaus

14
我会说这是一种可怕的做法。通过将其更改为背景图像,可以删除HTML中图像的语义。
animuson

14
@animuson:当我使用HTML / CSS进行打印的报告时,它仍然对我有帮助,并且不能对语义产生
庸俗的质疑

37

这是我发现的一种骇客解决方案:

#image {
    max-width: 10%;
    max-height: 10%;
    transform: scale(10);
}

这会将图像放大十倍,但将其限制为最终大小的10%-因此将其限制在容器上。

background-image解决方案不同,这也适用于<video>元素。

互动示例:


1
我喜欢这个解决方案。它不仅可以真正回答问题(我知道,有什么想法),而且还可以在所有现代浏览器中完美运行,而无需使用Javascript!
ndm13 2014年

2
我希望看到其中的一个小提琴。在我将img放置在400x400容器中的测试中,img只是被裁剪在角落里
cyberwombat 2015年

3
好答案!@Yashua您需要添加transform-origin: top left停止播种。/僵尸
XwipeoutX

辉煌。我唯一关心的是在编码不良的浏览器中可能会损失图像质量,但从理论上讲应该可以正常工作!
Codemonkey '16

有趣,但在Chrome上不起作用。导致图像的裁剪行。
MattK 2016年

23

今天,只说对象适合:包含。除了IE之外,支持无所不包:http : //caniuse.com/#feat=object-fit


3
在撰写本文时(2016
Zhang Zhang

8
请勿编辑其他人的答案来修正错别字或链接断开以外的问题。我不会在SO答案中说“像废话浏览器有一个polyfill”这样的幼稚内容,而且我不喜欢编辑我的答案使其看起来像我所说的那样。如果您想使用自己的话,请将其放在您自己的答案中。
Glenn Maynard

我会说,不是IE是问题,而是Edge。据caniuse object-fit仍在开发中。
BairDev

这应该是2017年及以后投票最多的答案之一...根据上面的caniuse链接,全球90%的用户现在使用支持此功能的浏览器
fgblomqvist

我刚刚发布了适用于和不适用的答案object-fitstackoverflow.com/a/46456673/474031
gabrielmaldi

8

的HTML:

    <div class="container">
      <img class="flowerImg" src="flower.jpg">
    </div>

CSS:

.container{
  width: 100px;
  height: 100px;
}


.flowerImg{
  width: 100px;
  height: 100px;
  object-fit: cover;
  /*object-fit: contain;
  object-fit: scale-down;
  object-position: -10% 0;
  object-fit: none;
  object-fit: fill;*/
}

5

您可以使用纯CSS和完整的浏览器支持来完成此操作,同时支持纵向和横向图像。

以下是可在Chrome,Firefox和Safari中使用的代码段(都使用object-fit: scale-down和不使用):

figure {
  margin: 0;
}

.container {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border: 1px solid #aaa;
}

.container_image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container2_image2 {
  width: 80px;
  height: 80px;
  object-fit: scale-down;
  border: 1px solid #aaa;
}
Without `object-fit: scale-down`:

<br>
<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

<br> Using `object-fit: scale-down`:

<br>
<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>


2

没有背景图像且不需要容器的另一种解决方案(尽管必须知道边界框的最大大小):

img{
  max-height: 100px;
  max-width: 100px;
  width: auto;    /* These two are added only for clarity, */
  height: auto;   /* as the default is auto anyway */
}


如果需要使用容器,则可以将max-width和max-height设置为100%:

img {
    max-height: 100%;
    max-width: 100%;
    width: auto; /* These two are added only for clarity, */
    height: auto; /* as the default is auto anyway */
}

div.container {
    width: 100px;
    height: 100px;
}

为此,您将具有以下内容:

<table>
    <tr>
        <td>Lorem</td>
        <td>Ipsum<br />dolor</td>
        <td>
            <div class="container"><img src="image5.png" /></div>
        </td>
    </tr>
</table>

1

此示例按比例拉伸图像以适合整个窗口。对上述正确代码的即兴添加$( window ).resize(function(){});

function stretchImg(){
    $('div').each(function() {
      ($(this).height() > $(this).find('img').height()) 
        ? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
        : '';
      ($(this).width() > $(this).find('img').width()) 
        ? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
        : '';
    });
}
stretchImg();

$( window ).resize(function() {
    strechImg();
});

如果有两个条件。第一个继续检查图像高度是否小于div并应用.fillheight类,而第二个检查宽度并应用.fillwidth类。在这两种情况下,使用.removeClass()

这是CSS

.fillwidth { 
   width: 100%;
   max-width: none;
   height: auto; 
}
.fillheight { 
   height: 100vh;
   max-width: none;
   width: auto; 
}

如果要在div中拉伸图像,可以替换100vh100%。此示例按比例拉伸图像以适合整个窗口。


OP特别要求仅使用CSS的方法。
Colt McCormack 2015年

0

您是否要向上缩放而不是向下缩放?

div {
    border: solid 1px green;
    width: 60px;
    height: 70px;
}

div img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    min-width: 500px;
    outline: solid 1px red;
}

但是,这不会锁定宽高比。


5
在拒绝某人的答案之前,请尝试使自己的期望更加明确。特别是当他们在您通过编辑清除问题之前回答了您的问题时。
可汗

2
另外,请尝试保持礼貌。如果您这样说,没人会帮助您。
Misha Reyzlin'4

@Artimuz如果我错过了您的指导,我深表歉意,但是对我来说,您似乎希望保持宽高比是不明确的,这就是为什么我对此特别评论。此外,您还会注意到,我从示例中粘贴了一段代码。我相信保持身高:自动;如果您指定宽度,将会为您完成。
ericosg 2012年

0

我已经使用表格将图片放在框内。它可以保持纵横比并以完全在盒子内的方式缩放图像。如果图像小于方框,则显示为居中。下面的代码使用40px宽度和40px高度框。(不太确定它的效果如何,因为我从另一个更复杂的代码中删除了它并对其进行了一点简化)

CSS:

.SmallThumbnailContainer
{
    display: inline-block; position: relative;
    float: left;    
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    margin: 0px; padding: 0px;
}
.SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; } 
.SmallThumbnailContainer tr { height: 40px; text-align: center; }
.SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px;  }
.SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; }

HTML:

<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
    <tr><td>
        <img src="thumbnail.jpg" alt="alternative text"/>
    </td></tr>
    </table>

0

最干净,最简单的方法:

首先介绍一些CSS:

div.image-wrapper {
    height: 230px; /* Suggestive number; pick your own height as desired */
    position: relative;
    overflow: hidden; /* This will do the magic */
    width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
}

HTML:

<div class="image-wrapper">
  <img src="yourSource.jpg">
</div>

这应该可以解决问题!


0

这对我有帮助:

.img-class {
  width: <img width>;
  height: <img height>;
  content: url('/path/to/img.png');
}

然后在元素上(您可以使用javascript或媒体查询来添加响应性):

<div class='img-class' style='transform: scale(X);'></div>

希望这可以帮助!


-3
.boundingbox {
    width: 400px;
    height: 500px;
    border: 2px solid #F63;
}
img{
    width:400px;
    max-height: 500px;
    height:auto;
}

我正在编辑答案,以进一步解释我的解决方案,因为我投了反对票。

使用上面在css中所示的样式设置后,现在以下html div将显示图像始终在宽度方向上合适,并将调整高宽比与宽度。因此,图像将按问题要求的比例缩放以适合边界框

<div class="boundingbox"><img src="image.jpg"/></div>

仅当盒子的高度大于宽度时,此答案才有效。
XwipeoutX
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.