图像边框保持120x120,而图像保持长宽比
我试图在我的drupal 7网站上实现的目标是保持文章图像的边框对于所有图像(120x120)都有一定的尺寸,而实际图像自身则根据图像样式(100x100)并且中间对齐。 (我无法提供示例图像,因为我没有10个声望点...)图像边框保持120x120,而图像保持长宽比
因此,对于肖像图像,高度将被限制为100px,宽度将为纵横比是。 与横向图像相反的东西,宽度被限制在100px,高度是纵横比。
虽然灰色边框保留120x120块,并且不会根据图像大小进行更改。
让我知道你是否需要我网站上的任何代码来帮助解决这个问题。
实现目标的最简单方法是在父div
上使用table-cell
显示属性,并使用vertical-align: middle
,并设置所需的边框,高度和宽度。比你的img应该设置max-width
和max-height
属性为100%。因此,具有HTML结构是这样的:
<div class="img-container">
<img src="..." />
</div>
你的CSS可能是:
.img-container {
width: 120px;
height: 120px;
display: table-cell;
vertical-align: middle;
}
.img-container > img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
Codepen显示结果:http://codepen.io/anon/pen/BpeOzG
非常感谢您的建议。它几乎解决了这个问题。它似乎与边界一起工作,但图像高度的问题依然存在。看看底部附近的辐射图像,这里是一个例子:[link](http://bargains24.co.za/new-deals) 这是我输入到注射器模块的CSS I: 'code ' .field-type-image {width:140px; height:140px; display:table-cell; vertical-align:middle; text-align:center; } .field-type-image> img { max-width:100%; 最大高度:100%; } –
这是输入到注射器模块的CSS I: '.field-type-image {0} 0%0%0%0%0%0% height:140px; display:table-cell; vertical-align:middle; text-align:center; } .field-type-image> img { max-width:100%; 最大高度:100%; }' –
你是指图像和边界之间的额外空间?如果是这样的话,原因在于默认情况下图像呈现为内联,这意味着它与a,b,c,d等字母位于同一行上,而这个额外的空间用于像f,g,年。为了解决这个问题,只需添加到'.img-container> img'' display:block;',你的问题就解决了。在这里,你还可以找到关于下降的很好的解释:http://*.com/questions/31444891/mystery-white-space-underneath-image-tag/31445364#31445364。 – Marcin
你可以添加一个片段与HTML,CSS和假像。 –