如何自动调整图像大小以适合“ div”容器?


1509

您如何自动调整大图像的大小,以使其适合较小的div容器,同时保持其宽高比?


示例:stackoverflow.com-当图像插入到编辑器面板上并且图像太大而无法容纳在页面上时,图像将自动调整大小。


一些有趣的库,可以根据容器大小调整图像大小:* plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin
Frosty Z

除了@Kevin的答案外,您还可以使用ImageBoss之类的服务来按需创建所需大小的图像。将图像安装在容器上固然很棒,但是响应式提供图像却是连击。
伊戈尔·埃斯科巴尔


@jolumg不完全;尽管某些解决方案有很多重叠之处,但也有许多不可互换的解决方案,因为一个方案要求放大图像,而另一个方案要求缩小图像。
TylerH

1
001-这是对您的问题的答复,该问题在我看到之前已被关闭。如何从父组件调用子组件。:我写了一篇博客文章,解释如何使组件使用的接口进行通信datajugglerblazor.blogspot.com/2020/01/...
数据变戏法

Answers:


1873

请勿对图片标签应用明确的宽度或高度。相反,给它:

max-width:100%;
max-height:100%;

另外,height: auto;如果只想指定宽度。

示例:http//jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>


40
这不会同时缩放高度和宽度。
尼尔

75
高度:自动;如果您只想指定宽度
Roi 2012年

82
如果图像太小怎么办?
Scott Rippey 2013年

18
@Scott Rippey-如果图像小于容器,则不会更改,因为使用的规则是max-width和max-height。
超现实主义之梦

15
使用封闭<a>标签,图像没有调整大小。将规则应用于A标签可解决此问题。
SPRBRN

432

对象拟合

事实证明,还有另一种方法可以做到这一点。

<img style='height: 100%; width: 100%; object-fit: contain'/>

会做的工作。这是CSS 3的东西。

小提琴:http : //jsfiddle.net/mbHB4/7364/


39
这将缩放图像以使其完全适合较大尺寸的容器,因此较小尺寸的图像可能无法完全覆盖容器。要改大尺寸,请使用object-fit: cover
Gabriel Grant

4
为我工作-与@KevinD的解决方案相比-在极端情况下这没有改变比例。干杯!
Barnabas Kecskes 2015年

9
得到完全支持,它将很棒。Atm,不幸的是,IE和Edge都不支持它。
频谱

2
如果要设置最大宽度和最大高度,可以执行此操作。完美的作品。
Sandip Subedi '17

3
似乎无法与IE11和Edge 14/15
mcorbe

106

当前,对于固定大小的图像(如JPEG或PNG文件),无法以确定性的方式正确执行此操作。

要按比例调整图像大小,你必须设置任何高度或宽度为“100%”,但不能同时使用。如果将两者都设置为“ 100%”,则图像将被拉伸。

选择高度还是宽度取决于图像和容器的尺寸:

  1. 如果您的图片和容器都是“人像形”或“风景”形(分别比宽度高或比高度高),那么无论高度或宽度为“%100” 。
  2. 如果图像是纵向的,而容器是横向的,则必须height="100%"在图像上进行设置。
  3. 如果图像是横向的,并且容器是纵向的,则必须width="100%"在图像上进行设置。

如果您的图像是SVG(可变尺寸的矢量图像格式),则可以自动进行扩展以适合容器。

您只需要确保SVG文件在<svg>标记中未设置以下所有属性:

height
width
viewbox

那里的大多数矢量绘图程序都会在导出SVG文件时设置这些属性,因此,每次导出时,您都必须手动编辑文件,或者编写脚本来执行此操作。


2
就是我还是这个帖子有几个错误?““人像形”或“风景”形(分别比它们高的高和比它们高的宽的高)”……您的“代表”是否应该调换?在项目符号点2和3.中,它们都说“您必须在图像上设置width =“ 100%””。我猜您是复制粘贴的,却忘记将其中之一更改为“高度”,而不是“宽度”。
Buttle Butkus,

修复它。现在2和3可能都错了或都错了,而不是一个错和一个对。我不记得正确的答案是什么。;)
尼尔

2
“目前,对于固定大小的图像(如JPEG或PNG文件),无法确定性地正确执行此操作。”?这似乎是不正确的。@ Thorn007的答案提供了这样一种方式,我已经用它自己- stackoverflow.com/questions/12259736/...
达恩·达斯卡莱斯卡

如果图像比容器小,则@DanDascalescu Thorn007的答案不会扩展图像。当今最好的解决方案是使用具有背景图像和set的元素background-size: contain
凯文·边界

“要按比例调整图像大小,必须将高度或宽度设置为“ 100%”,但不能同时设置两者。<这正是帮助我的原因。谢谢
Alexander Santos

77

这是一个解决方案,即使所提供的图像太小或太大而无法适合div,也可以在div中垂直和水平对齐img,而不会进行任何拉伸。

HTML内容:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

CSS内容:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

jQuery部分:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

1
CSS完全按照我的要求工作,我跳过了jQuery位
bkwdesign

48

简单点!

给容器一个固定的 height,然后在其中的img标签上设置widthmax-height

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

区别在于您将设置width为100%,而不是max-width


2
如果图像很高且视口很短,则会导致Google Chrome中的图像比例发生变化。
Mikko Rantalainen 2014年

29

一个美丽的hack。

您可以通过两种方式使图像响应。

  1. 当图像是背景图像时。
#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

在这里运行


但是,应该使用img标签来把图像,因为它是优于background-image来讲SEO,你可以写关键字alt了的img标签。因此,这里可以使图像响应。

  1. 当图像在img标签中时。
#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

在这里运行


22

您可以将图像设置为div的背景,然后使用CSS background-size属性

background-size: cover;

它将“将背景图像缩放到尽可能大的位置,以使背景区域完全被背景图像覆盖。背景图像的某些部分在背景定位区域内可能看不到”W3Schools


我相信通过“适合div容器”,OP意味着图像在任何一个维度上都不应超出包含元素的范围。在@JonatasWalker的解决方案中,图像被裁剪。另外,根据情况,背景解决方案在语义上可能不正确。例如,您可能需要alt值和诸如此类的东西(尽管您也可以添加对于非辅助技术不可见的虚拟图像),或者可能需要使其可单击。
巴拉兹

@Balázs啊,在这种情况下,正确的设置应该是正确的background-size: contain,我想我会亲自走虚拟图像路线,只是因为没有JavaScript确实没有一种简单的方法来执行此处所述的操作
Chuck Dries

@ChuckDries我不确定您的意思,接受的答案可以解决问题。
巴拉兹

22

看看我的解决方案:http : //codepen.io/petethepig/pen/dvFsA

它是用纯CSS编写的,没有任何JavaScript代码。它可以处理任何大小和方向的图像。

给定这样的HTML:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

CSS代码为:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

2
这不会处理过小的图像。
乔什(Josh C)

1
@JoshC是什么意思?这个效果很好:codepen.io/petethepig/pen/maeFo
德米特里(

2
图像太小404。
2014年

我想指出的是,该方法也适用于可变宽度的容器。很棒的工作德米特里!
卡米洛·马丁

稍加修改即可完美:codepen.io/anon/pen/BoQmBw谢谢Dmitry。
Alqin


10

此解决方案不会拉伸图像并填充整个容器,但是会剪切一些图像。

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

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

9

我看到很多人都建议对象适合,这是一个不错的选择。但是,如果您希望它也能在较旧的浏览器中运行,则还有另一种方法可以轻松实现。

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

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/

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


8

以下内容非常适合我:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

7

我有更好的解决方案,不需要任何JavaScript。它反应灵敏,我经常使用它。您通常需要将具有任何纵横比的图像拟合到具有指定纵横比的容器元素。必须使整个事情全面响应。

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}
<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

您可以独立设置最大宽度和最大高度。图像将遵循最小的图像(取决于图像的值和纵横比)。您还可以将图像设置为所需的对齐方式(例如,对于无限大的白色背景上的产品图片,可以轻松地将其定位在底部的中央)。


5

将图像所需的高度和宽度提供给包含<img>标记的div。不要忘记在适当的样式标签中指定高度/宽度。

在<img>标记中,将max-height和设置max-width为100%。

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

正确后,可以在适当的类中添加详细信息。


5

以下代码改编自先前的答案,并由我使用名为的图片进行了测试storm.jpg

这是显示图像的简单页面的完整HTML代码。这项工作完美,并由我通过www.resizemybrowser.com进行了测试。将CSS代码放在HTML代码的顶部,在标题下面。将图片代码放在您想要的图片的任何位置。

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

5
<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

2
如果您可以添加一些对代码的解释会很好(我知道您那里有一些注释,但仅回答了一些关于为什么/如何回答的问题,它将使问题看起来更好)。
显示名称缺失

5

您必须告诉浏览器放置它的高度:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

5

编辑:以前的基于表的图像定位在Internet Explorer 11中有问题(max-heightdisplay:table元素中不起作用)。我已将其替换为基于行内的定位,这种定位不仅在Internet Explorer 7和Internet Explorer 11中都能正常工作,而且所需的代码更少。


这是我对这个问题的看法。只有在容器具有指定的大小(max-width并且max-height似乎与没有具体大小的容器不兼容)的情况下,它才能工作,但是我以允许其重用的方式编写了CSS内容(添加picture-frame类和px125现有容器的大小类)。

在CSS中:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

在HTML中:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

演示


编辑:使用JavaScript的可能的进一步改进(提升图像):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

使用这种方法有一个缺点。如果图像加载失败,则将在父容器中显示替代文本line-height。如果alt文字超过一行,它将开始看起来非常糟糕...
jahu

5

我使用以下代码解决了此问题:

<div class="container"><img src="image_url" /></div>
.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

4

如此处的回答,您也可以使用vh单位代替max-height: 100%在浏览器(例如Chrome)上不起作用的单位:

img {
    max-height: 75vh;
}

1
你是说vh吗 在Chrome中什么不起作用?
misterManSam '16

@misterManSam是的,非常感谢,昨天我发布此答案时太累了。max-height: xx%(百分比单位)在Chrome中不适用于某些元素,例如img,但vh单位有效。然而,百分比一起工作heightwidthmax-width
gaborous

4

我以这种方式在水平和垂直方向上将超链接内的图像按比例居中和缩放:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

它已经在Internet Explorer,Firefox和Safari中进行了测试。

有关居中的更多信息,请参见此处


4

图像太小,Thorn007不能接受的答案

为了解决这个问题,我添加了一个比例因子。这样,它使图像更大并填充了div容器。

例:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

笔记:

  1. 对于WebKit,必须添加-webkit-transform:scale(4); -webkit-transform-origin:left top;样式。
  2. 比例因子为4时,最大宽度= 400/4 = 100,最大高度= 200/4 = 50
  3. 另一种解决方案是将最大宽度和最大高度设置为25%。更简单。

1
如果您要支持整个市场,这不是一个非常可靠的解决方案。除非您对不支持CSS3的浏览器进行某种后备支持,否则我会避免使用CSS3。
dudewad 2014年

4

如果您使用的是Bootstrap,则只需将img-responsive类添加到img标签中:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

引导图像


3

下面是一个似乎对我有用的简单解决方案(四步修复!)。该示例使用宽度确定整体大小,但是您也可以将其翻转以使用高度。

  1. 将CSS样式应用于图像容器(例如<img>)
  2. 将width属性设置为所需的尺寸
    • 对于尺寸,%用于相对大小或自动缩放(基于图像容器或显示)
    • 使用px(或其他)静态尺寸或设定尺寸
  3. 将height属性设置为根据宽度自动调整
  4. 请享用!

例如,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

3

所有提供的答案(包括接受的答案)div包装器具有固定大小的假设下起作用。因此,无论div包装大小如何,这都是这样做的方法,如果开发响应页面,这将非常有用:

将这些声明写在DIV选择器中:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

然后将这些声明放入IMG选择器中:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

很重要:

maxHeight必须是相同的两个DIVIMG选择。


1
正确的CSS声明是“ max-height”,而不是驼峰式的maxHeight。
马克·汤森

3

一个简单的解决方案是使用flexbox。将容器的CSS定义为:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

将包含的图像宽度调整为100%,您应该在保留尺寸的情况下在容器中获得一个很好的居中图像。


1

该解决方案很简单,只需一点数学即可。

只需将图片放在div中,然后放在您指定图片的HTML文件中即可。使用图像的像素值以百分比设置宽度和高度值,以计算宽度与高度的确切比率。

例如,假设您的图像的宽度为200像素,高度为160像素。您可以肯定地说宽度值将为100%,因为它是较大的值。然后,要计算高度值,只需将高度除以宽度即可得到百分比值80%。在代码中它将看起来像这样...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

1

最简单的方法是使用object-fit

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

如果您使用的是Bootstrap,只需添加img-responsive类并更改为

.container img{
    object-fit: cover;
}


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.