调整图像大小以占据所有<div>
大卫·加德（David Gard）
如何将图像限制在容器中，以使整个容器中充满尽可能多的图像？
例如（我不知道图像的大小，这只是一个例子）-如果我有一个100x100的图像容器和600x400的图像，则需要满足以下条件。
- 图片应以150x100显示
- 图片应在容器中居中
- 图片的溢出部分（在此示例中为左右25px）应被隐藏。
请注意-有些图像的高度大于宽度，因此任何解决方案都需要使用水平和垂直居中的所有尺寸的图像。
可悲的是，任何解决方案也必须与IE9一起使用（因为我正在使用的Intranet所有者使用的浏览器），因此HTML5 / CSS3解决方案将无法使用。
这是几个视觉示例-
我尝试了各种CSS样式-
- 如果我
<img>将<div>容器的内部嵌套，则图像 - 如果我绝对将其放置在
<img>上方，<div>那么如果宽度大于高度（即600x400），则无法将其垂直居中。
任何建议将不胜感激。
DoXicK
既然您提到了它必须与IE9一起使用：background-size: cover就可以做到这一点。您只是不能将图像本身用作img元素，而必须将其作为背景图像分配给容器。
我在这里为你做了一个jsfiddle
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
调整图像大小以占据所有<div>
- 2
在没有CSS的Javascript Div类中调整图像大小
- 3
使子div在调整大小时占据整个父空间
- 4
在调整大小时让子div占据整个父空间
- 5
React：使div占据所有可用高度
- 6
如何使div占据所有可用高度？
- 7
如何调整div的大小以填充所有空间
- 8
使用jQuery调整div中所有元素的大小
- 9
调整所有移动设备的DIV表大小
- 10
将所有div的大小调整为最高div的大小
- 11
html图像自动调整div的大小
- 12
jQuery-调整图像大小以适合div
- 13
调整图像大小以适合<td>或div
- 14
如何根据div宽度调整图像大小？
- 15
DIV不跟随调整大小的图像的宽度
- 16
使Div中的图像不调整大小
- 17
调整大小后浮出div的图像
- 18
在contenteditable div中禁用图像的调整大小
- 19
调整图像大小以适应Div的限制
- 20
如何在可调整大小的引导面板中使子div占据父div的全部空间？
- 21
如何在可调整大小的引导面板中使子div占据父div的全部空间？
- 22
如何让子div占据父div的大小
- 23
Javascript将特定类的所有div中所有图像的大小加倍
- 24
在没有jquery UI的div中单击时如何使图像可调整大小
- 25
如何动态调整div的大小以使其占据最大可能的宽度？
- 26
如何自动调整所有手机/平板电脑显示格式的div大小？
- 27
它如何使div / div图像在调整大小时不移动，同时还允许它们从顶部开始具有％
- 28
它如何使div / div图像在调整大小时不移动，同时还允许它们从顶部开始具有％
- 29
如何调整div的大小
我来说两句