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

Question

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

---

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

Answer 1

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

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>

Answer 2

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/

Answer 3

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

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

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

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

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

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

height
width
viewbox

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

Answer 4

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

我希望这可以帮助你们

Answer 5

简单一点!

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

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

区别在于你width将100%设置为不是max-width.

Answer 6

一个美丽的黑客.

您有两种方法可以使图像响应.

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标签.所以这里是你可以使图像响应.

2. 当图像在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>

在这里运行它

Answer 7

有多种方法可以使图像适合<div>.

img {
    object-fit: cover;
}

CSS object-fit属性用于指定如何调整<img>or 的大小<video>以适合其容器。

该属性告诉内容以多种方式填充容器；例如“保持纵横比”或“伸展并占据尽可能多的空间”。

• 填充 - 这是默认值。调整图像大小以填充给定尺寸。如有必要，图像将被拉伸或压缩以适合
• 包含 - 图像保持其纵横比，但调整大小以适合给定尺寸
• cover - 图像保持其纵横比并填充给定的尺寸。图像将被裁剪以适合
• none - 图像未调整大小
• 缩小 - 图像缩小到无或包含的最小版本

您可以在此处找到更多工作示例。

Answer 8

看看我的解决方案: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;
}

Answer 9

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

background-size: cover;

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

Answer 10

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

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

将包含的图像宽度调整为 100%，您应该在容器中获得一个漂亮的居中图像，并保留尺寸。

Answer 11

我刚刚发布了一个jQuery插件,可以通过很多选项完全满足您的需求:

https://github.com/GestiXi/image-scale

用法:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JS

$(function() {
    $("img.scale").imageScale();
});

Answer 12

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

HTML

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

CSS

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

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

Answer 13

我使用以下代码修复了这个问题：

<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%;
}

Answer 14

以下适用于我:

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

Answer 15

<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>

Answer 16

我有更好的解决方案,不需要任何JS.它完全响应,我经常使用它.您经常需要将任何宽高比的图像与指定宽高比的容器元素相匹配.并且让整个事情完全响应是必须的.

/* 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>

您可以单独设置最大宽度和最大高度,图像将视为最小的一个(取决于图像的值和纵横比).您还可以根据需要将图像设置为对齐(例如,对于无限白色背景上的产品图片,您可以轻松地将其定位到中心底部)

Answer 17

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

请在这里签出我的答案： IE和Edge修复对象适合：封面；

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

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/

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

Answer 18

我以这种方式在超链接中水平和垂直地居中和按比例缩放图像：

#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 中进行了测试。

有关居中的更多信息在这里。

Answer 19

将图像所需的高度和宽度提供给包含<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>

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

Answer 20

下面的代码是从上面改编而来的,我使用一个名为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>

Answer 21

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

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

Answer 22

编辑：以前基于表格的图像定位在 Internet Explorer 11 中存在问题（max-height不适用于display: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>

演示

.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 */
}

<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) };
});

Answer 23

如此处所回答，您也可以使用vh单位而不是max-height: 100%如果它在您的浏览器（如 Chrome）上不起作用：

img {
    max-height: 75vh;
}