如何自动衡量图像以适合“ DIV”容器？

StackOverflow https://stackoverflow.com/questions/3029422

  •  26-09-2019
  •  | 
  •  

题

您如何自动化一个大图像，以使其适合较小的宽度div容器，同时保持其宽度：高度比？

示例：stackoverflow.com-当将图像插入编辑面板上时，图像太大而无法安装到页面上时，图像会自动调整大小。

有帮助吗？

解决方案

请勿将明确的宽度或高度应用于图像标签。相反，给它：

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>

其他提示

对象拟合

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

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

将完成工作。这是CSS 3件。

小提琴： http://jsfiddle.net/mbhb4/7364/

当前没有办法以确定性的方式正确执行此操作，并使用固定大小的图像（例如JPEGS或PNG文件）。

要按比例地调整图像大小，您必须设置 任何一个 高度或宽度为“ 100％”，但不是两者兼而有之。 如果您将两者都设置为“ 100％”，则您的图像将被拉伸。

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

  1. 如果您的图像和容器既“肖像形状”或“景观形状”（比它们的宽度或更宽的景观形状，分别比高高更大），那么哪个高度或宽度都不重要，而不是“％100” 。
  2. 如果您的图像是肖像，并且您的容器是景观，则必须设置 height="100%" 在图像上。
  3. 如果您的图像是景观，并且您的容器是肖像，则必须设置 width="100%" 在图像上。

如果您的图像是SVG，它是可变大小的矢量图像格式，则可以具有扩展以自动发生容器的扩展。

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

height
width
viewbox

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

这是一种解决方案，即使所提供的图像太小或太大，无法在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);
    }

使它简单！

给容器一个 固定的 height 然后是 img 在其中标记，设置 width 和 max-height.

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

区别在于您设置了 width 是100％，而不是 max-width.

一个美丽的黑客。

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

  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>

运行 这里

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

您可以将图像设置为DIV的背景，然后使用 CSS背景大小属性:

background-size: cover;

它会 “缩放背景图像尽可能大，以使背景区域被背景图像完全覆盖。背景图像的某些部分可能在背景定位区域内观看” -- W3Schools

我刚刚发布了一个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>

JavaScript

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

该解决方案不会拉伸图像并填充整个容器，但可以切断一些图像。

html：

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

CSS：

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

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

以下对我非常有用：

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

我有更好的解决方案，而无需任何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>

您可以独立设置最大宽度和最大高度；图像将尊重最小的图像（取决于图像的值和纵横比）。您还可以将图像设置为按需对齐（例如，对于无限白色背景上的产品图片，您可以轻松地将其放置在中心底部）。

将图像所需的高度和宽度提供给包含的divu003Cimg>标签。不要忘记以适当的样式标签给出高度/宽度。

在里面u003Cimg>标签，给 max-height 和 max-width 为100％。

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

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

下面的代码是根据以前的答案进行了调整的，并通过我的图像进行了测试 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>

您必须告诉浏览器放置在哪里的高度：

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

我以这种方式水平和垂直地将超链接内部的图像按比例地缩小：

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

有关中心的更多信息是 这里.

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，max-height = 200/4 = 50
  3. 另一种解决方案是将最大宽度和最大高度设置为25％。这更简单。
<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>

编辑： 以前基于表的图像定位在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>

演示 

/* Main style */

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

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

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

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}
<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.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) };
});

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

img {
    max-height: 75vh;
}

我看到很多人是建议 对象拟合 这是一个不错的选择。但是，如果您想工作 较旧的浏览器, ，还有另一种容易做到的方法。

请在这里查看我的答案：IE和边缘修复对象拟合：封面；

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

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

这使图像获得对象拟合的效果：封面。

这是上述逻辑的演示。

https://jsfiddle.net/furqan_694/s3xle1gp/

此逻辑在所有浏览器中都起作用。

一个简单的解决方案（4步修复！！）似乎对我有用，在下面。该示例使用宽度来确定整体尺寸，但是您也可以将其翻转以使用高度。

  1. 将CSS样式应用于图像容器（例如，u003Cimg> ）
  2. 将宽度属性设置为所需的尺寸
    • 对于尺寸，请使用 % 用于相对大小或自动化（基于图像容器或显示）
    • 利用 px （或其他）用于静态或设置尺寸
  3. 根据宽度设置高度属性以自动调整
  4. 请享用！

例如，

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

所有提供的答案，包括被接受的答案，工作 只要 在以下假设中 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 必须是 相同的 对于两个 DIV 和 IMG 选择器。

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

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

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

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

将包含的图像宽度调整为100％，您应该在保留尺寸的容器中获得一个不错的中心图像。

如果您正在使用Bootstrap，则只需要添加 img-responsive 上课 img 标签：

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

引导图像

该解决方案很容易，有一些数学...

只需将图像放入DIV中，然后将图像放入指定图像的HTML文件中。使用图像的像素值将宽度和高度值设置为百分比，以计算宽度与高度的精确比率。

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

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

检查我的答案， 做出响应图像 - 最简单的方法 - 

img{
    width: 100%;
    max-width: 800px;
}

最简单的方法是使用 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;
}

或者您可以简单地使用：

background-position:center;
background-size:cover;

现在，图像将占据Div的所有空间。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top