如何在div中放置图像(img)并保持纵横比？

Question

我有一个48x48的div,里面有一个img元素,我想把它装进div而不会丢失任何部分,同时保持这个比例,是否可以使用html和css实现？

Answer 1

使用max-height:100%; max-width:100%;了DIV内的图像.

Answer 2

不幸的是,max-width + max-height并没有完全覆盖我的任务......所以我找到了另一个解决方案:

要在缩放时保存图像比例,您也可以使用object-fitCSS3属性.

实用文章:使用CSS3控制图像宽高比

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

坏消息:不支持IE(我可以使用)

Answer 3

如果您在编写css时不知道图像的尺寸,则需要一些JavaScript来防止裁剪.

HTML和JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

如果您使用JavaScript库,则可能希望利用它.

Answer 4

仅使用CSS:

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

Answer 5

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

这将使图像扩展以填充其父级,其大小在divCSS中设置.

Answer 6

对我来说，以下 CSS 有效（在 Chrome、Firefox 和 Safari 中测试）。

有多种因素协同作用：

• max-height: 100%;、max-width: 100%;、height: auto;、width: auto;使 img 缩放到先达到 100% 的尺寸，同时保持纵横比
• position: relative;在容器和position: absolute;子项中以及top: 50%;容器left: 50%;中的 img 左上角居中
• transform: translate(-50%, -50%);将 img 移回左侧和顶部，移动大小的一半，从而使 img 在容器中居中

CSS：

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

Answer 7

我有很多问题要解决这个问题,我找到的每一个解决方案似乎都没有用.

我意识到我必须将div显示设置为flex,所以基本上这是我的CSS:

div{
display: flex;
}

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

Answer 8

试试CSS：

img {
  object-fit: cover;
  height: 48px;
}