logo标签列表

如何在保持纵横比的同时自动调整图像大小

htmlcssimageaspect-ratio
2081
如何自动调整大小的大图像，使其适应较小宽度的
容器，同时保持其宽度：高度比例？
示例：stackoverflow.com - 当将图像插入到编辑面板上，并且图像太大无法适应页面时，图像会自动调整大小。
2
一些有趣的库，用于调整图像大小以适应容器：
  • http://plugins.jquery.com/project/myimgscale
  • http://code.google.com/p/jquery-imagefit-plugin/
 - Maxime Pacary
除了 @Kevin 的回答之外，您还可以使用像 ImageBoss 这样的服务根据您的要求创建所需大小的图像。将图像适配到容器上是很好的，但响应式地提供图像的效果更好。 - Igor Escobar
可能重复：https://dev59.com/i3I-5IYBdhLWcg3wYXH8 - jolumg
@jolumg 不完全是这样；虽然有些解决方案有很多重叠之处，但也有许多解决方案是不能互换的，因为这个问题是要求如何将图像放大，而这个问题是要求将图像缩小。 - TylerH
33个回答
12

这个解决方案不会拉伸图像并填满整个容器，但是它会裁剪一些图像。

HTML：

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

CSS：

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

img {
    min-width: 100%;
    min-height: 100%;
}
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>

JavaScript

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

我看到很多人建议使用 object-fit，这是一个很好的选择。但如果你希望它在旧浏览器中也能正常工作，还有另一种简单的方法。

这很简单。我采用的方法是使用 absolute 定位图像，并使用以下组合将其放置在容器中心：

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/

此逻辑在所有浏览器中均可使用。

10

以下代码对我来说完全有效：

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}
对我来说，它也完美地运作。不确定在这种情况下命令如何一起工作，特别是height: 99999px的使用方式？我将其删除以查看效果，水平居中失败了，因此似乎没有冗余。 - Vass
1
@ Vass height:99999px 基本上试图放大图像，同时保持宽高比（width:auto），直到达到垂直或水平边界（max-height 或 max-width）。我认为你还可以使用 height:200%; 或 width:999vw。 - Chong Lip Phang
在使用网格（网格模板区域）时，我发现在网格区域的上层div中包含overflow-y: hidden;在我面临的情况下是必要的。 - Vass
10

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

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

将所包含的图像宽度调整为100％，您应该会得到一个漂亮的居中图像，并保留其尺寸。
在我的情况下它完美地工作了，overflow: hidden 实际上强制它调整大小并缩小高度，但为什么呢？我原本期望它只是隐藏超出边界的图像部分，但实际上它强制图像缩小到实际比例。 - Silencer
9
我使用以下代码解决了这个问题：
<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%;
}
7
<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>
7
在包含标签的div中设置您所需的图像的高度和宽度。不要忘记在适当的样式标签中指定高度/宽度。
在标签中，将max-height和max-width设置为100%。
<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

当您做对之后，您可以添加适当的类别细节。

6

编辑：之前使用基于表格的图像定位在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) };
});
使用这种方法存在一个缺点。如果图像无法加载，则将显示带有父容器 line-height 的 alt 文本。如果 alt 文本有多行，那么它会开始看起来非常糟糕... - jahu
6

如此处所述，如果max-height: 100%在您的浏览器（例如Chrome）上无效，您还可以使用vh单位：

img {
    max-height: 75vh;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接