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


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


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


1083
2018-06-12 17:00


起源


一些有趣的库,用于调整图像大小以适应容器:* plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin - Frosty Z
除了@Kevin的回答......您还可以使用ImageBoss等服务按需创建所需大小的图像。将图像安装在容器上是很好的,但响应地提供图像是方式。 - Igor Escobar


答案:


不要对图像标记应用明确的宽度或高度。相反,给它:

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>


1439
2018-06-12 17:03



身高:自动;如果只想指定宽度 - Roi
如果图像太小会怎么样? - Scott Rippey
@Scott Rippey - 如果图像小于容器,它将不会改变,因为使用的规则是max-width和max-height。 - Surreal Dreams
@Felipe这对我有用。 - Kelvin Dealca
随着封闭 <a> 标签,图像没有调整大小。将规则应用于A标签解决了这个问题。 - SPRBRN


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

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

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

会做的工作。这是CSS3的东西。

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


238
2018-06-12 02:48



哈哈对于真正的@Pravin最终会成为25行JS,只是为了做一些css应该在第一天完成的事情。 - James Harrington
这将缩放图像以完全适合容器内的较大尺寸,因此较小的尺寸可能无法完全覆盖它。要改为裁剪较大的尺寸,请使用 object-fit: cover - Gabriel Grant
为我工作 - 与@KevinD的解决方案相比 - 这并没有改变边缘情况下的比例。干杯! - Barnabas Kecskes
仅适用于宽度,而不适用于高度。 - Neolisk
完全支持时会很棒。 Atm,不幸的是IE和Edge都不支持它。 - spectras


目前,无法以确定的方式正确地执行此操作,使用固定大小的图像(如JPEG或PNG文件)。

要按比例调整图像大小,您必须进行设置  高度或宽度为“100%”,但不是两者。 如果将两者都设置为“100%”,则图像将被拉伸。

选择是否进行高度或宽度取决于您的图像和容器尺寸:

  1. 如果您的图像和容器都是“纵向形状”或两者都是“横向形状”(分别高于它们的宽度,或者比它们的高度宽),那么高度或宽度中的哪一个都是“%100”无关紧要。
  2. 如果您的图像是纵向的,并且您的容器是横向的,则必须进行设置 height="100%" 在图像上。
  3. 如果您的图像是横向的,并且您的容器是纵向的,则必须进行设置 width="100%" 在图像上。

如果您的图像是SVG(可变大小的矢量图像格式),则可以使扩展适合容器自动发生。

您只需要确保SVG文件中没有设置这些属性 <svg> 标签:

height
width
viewbox

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


93
2018-06-11 20:13



这个帖子只是我还是有几个错误? “'肖像'或'两者''形状''(宽度比它们高,分别高于它们的宽度)”......不应该转换你的“各自”?在你的子弹点2.和3.中,他们都说“你必须在图像上设置宽度=”100%“。我猜你复制粘贴,忘了将其中一个更改为“高度”而不是“宽度”。 - Buttle Butkus
修好了。 2和3现在可能都是错误的或两者都是正确的,而不是一个是错的,一个是正确的。我不记得正确答案是什么。 ;) - Neil
“目前没有办法以确定的方式正确地做到这一点,使用固定大小的图像,如JPEG或PNG文件。”?这似乎是不正确的。 @ Thorn007的回答提供了这样的方式,我自己也用过 - stackoverflow.com/questions/12259736/... - Dan Dascalescu
@DanDascalescu Thorn007的答案如果小于容器,则不会扩展图像。现在最好的解决方案是使用带背景图像和设置的元素 background-size: contain。 - Kevin Borders


这是一个解决方案,即使提供的图像太小或太大而无法放入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);
    }

我希望这可以帮助你们


65
2017-10-04 09:40



代码对我来说很好...... !!! Juzt添加了代码演示。 jsfiddle.net/sahotaparamjitsingh/Kkz4J - ParaMeterz
这适用于Firefox和Chrome,是最简单的解决方案。我的div容器实际上有一个可变的高度和宽度,所以说140px的内容我将包含div设置为height = 100%,width = 85%例如,这似乎仍然有用。谢谢! - FireDragon
这是保证金:我失踪了。非常感谢! - Bryan Rayner
CSS完全按照我的意愿工作,我跳过了jQuery位 - bkwdesign


简单!

给容器一个 固定  height 然后为了 img 里面的标签设置 width 和 max-height

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

区别在于你设置了 width 是100%不是 max-width


37
2017-09-25 08:45



如果图像非常高且视口很短,则会导致Google Chrome中的图像比率发生变化。 - Mikko Rantalainen


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

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

给出这样的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;
}

19
2018-06-28 18:26



这不能处理太小的图像。 - Josh C
@JoshC你是什么意思?这个很好用: codepen.io/petethepig/pen/maeFo - dmitry
图片上的404太小了。 - Josh C
我想指出这个方法也适用于可变宽度容器。德米特里真是太棒了! - Camilo Martin
稍作修改即可完美: codepen.io/anon/pen/BoQmBw 谢谢德米特里。 - Alqin


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

background-size: cover;

并且它将“将背景图像缩放到尽可能大的背景图像完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域内”-w3schools.com


17
2017-12-16 12:37



它的演示 - Jonatas Walker
我相信通过“适合div容器”,OP意味着图像不应超出任何维度中的包含元素。在@JonatasWalker的解决方案中,图像被裁剪。根据具体情况,后台解决方案也可能在语义上不正确。例如,您可能需要 alt 值和这样的东西(虽然你也可以添加一个对非辅助技术不可见的虚拟图像),或者你可能需要使它可以点击。 - Balázs
@Balázs啊在这种情况下,正确的设置是 background-size: contain 而且我认为我个人会去虚拟图像路线只是因为没有一个简单的方法可以在没有JavaScript的情况下执行此处所描述的操作 - Chuck Dries
@ChuckDries我不太确定你的意思,接受的答案解决了这个问题。 - Balázs


一个美丽的黑客。

您有两种方法使图像响应。

  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>

运行 这里


12
2018-02-21 07:45





此解决方案不会拉伸图像并填充整个容器,但会切割部分图像。

HTML

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

CSS

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

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

}

9
2017-08-07 11:54