图像边框保持120x120，而图像保持长宽比

我试图在我的drupal 7网站上实现的目标是保持文章图像的边框对于所有图像（120x120）都有一定的尺寸，而实际图像自身则根据图像样式（100x100）并且中间对齐。（我无法提供示例图像，因为我没有10个声望点...）图像边框保持120x120，而图像保持长宽比

因此，对于肖像图像，高度将被限制为100px，宽度将为纵横比是。与横向图像相反的东西，宽度被限制在100px，高度是纵横比。

虽然灰色边框保留120x120块，并且不会根据图像大小进行更改。

让我知道你是否需要我网站上的任何代码来帮助解决这个问题。

来源

2017-02-16 Steve-o

你可以添加一个片段与HTML，CSS和假像。 –

实现目标的最简单方法是在父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

来源

2017-02-16 20:42:55 Marcin

非常感谢您的建议。它几乎解决了这个问题。它似乎与边界一起工作，但图像高度的问题依然存在。看看底部附近的辐射图像，这里是一个例子：[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://stackoverflow.com/questions/31444891/mystery-white-space-underneath-image-tag/31445364#31445364。 – Marcin

图像边框保持120x120，而图像保持长宽比

回答

相关问题