如何将一个<img>居中放在一个div中并使其与div的高度一起缩放？

我使用居中的imgs作为某些图块的背景。我试图让这些图像与他们父母div的高度一起缩放，如果它们更宽，那么他们的父母会为他们隐藏溢出。如何将一个<img>居中放在一个div中并使其与div的高度一起缩放？

例子：

*我知道了现在的工作。答案是下面，我更新这个代码来显示所有我需要用它来得到它的工作*

HTML

<div class="container"> 
    <img class="derp" src="http://gridiculo.us/images/kitty02.jpg"> 
</div>

CSS：

.container { 
    height:250px; 
    width:50%; 
} 
.derp{ 
    object-fit: cover; 
    height: 100%; 
    width: 100%; 
}

这里有一个近例：http://codepen.io/chriscoyier/pen/myPMGB

区别在于我使用s而不是背景图像，而不是完全填充div的img，它适合于高度并隐藏宽度溢出。

我试图避免使用背景图像，因为我使用了很多这些瓷砖，并且为每个瓷砖制作CSS规则都不起作用。

来源

2015-08-14 user3799026

'width：auto' ..？？ –

如果是背景，为什么不使用CSS背景（具有背景比例，背景位置等）。 – GolezTrol

@marc每个元素将使用不同的URL，我试图避免使用背景图像，因为他们会有大量的CSS规则。 – user3799026

为了按照div的高度进行缩放，我会将高度从px更改为% - 这样，更大的div，更大的图片。为了确定图像，我会使用图像CSS中的边距。这看起来会像这样：

.derp{ 
 
     height:80%; 
 
     width:80%; 
 
     margin:10%; 
 
    } 
 
.container { 
 
    height:250px; 
 
    width:50%; /* needed */ 
 
    /* inner img is centered horizontally */ 
 
    vertical-align:top; 
 
    text-align:center; 
 
    overflow-x:hidden; 
 
}

<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div --> 
 
    <img class="derp" src="http://gridiculo.us/images/kitty02.jpg"> 
 
</div>

来源

2015-08-14 22:01:07

有没有办法保持纵横比与图像的溢出被隐藏的宽度？ – user3799026

是 - 按照pentz的建议，向derp类添加'object-fit：cover;'。 –

根据您需要多少个浏览器的支持，我会建议你使用对象的配合！支持它是okay if you can ignore IE，但如果您的项目符合条件，我认为今天使用它没有问题。此外，总是有一个polyfill。

你可以找到一个不错的总结on CSS-Tricks.com有关财产。它基本上与背景大小相似，但是用于<img>标签。在你的情况下，object-fit: cover;会诀窍。

我在CodePen上发布了a little demo，告诉你它是如何工作的。

img { 
    height: 100%; 
    object-fit: fill; 
    width: 100%; 
}

来源

2015-08-14 22:04:31 pentzzsolt

，以保持图像的长宽比，最好的办法是将宽度设置为自动（和它的默认行为，所以你并不需要明确设置）。简单的overflow:hidden它的工作原理与您想要的几乎一样。

坚硬的部分是水平居中。你可以试试这个答案：css to center a image horizontally。

但是，如果所有图像的大小不一样，则需要为每个图像制定一个规则。在这种情况下，将图像设置为background-img对于语义和可访问性会更好（因为您的图像在页面中没有意义，它不会传达任何信息，而是装饰）。一个<img>将被屏幕阅读器读取（alt属性），并在你的情况下，它不会帮助盲人。

来源

2015-08-14 22:30:51 yhoyhoj

如何将一个<img>居中放在一个div中并使其与div的高度一起缩放？

回答

相关问题