gpt4 book ai didi

javascript - 响应图像的垂直填充

转载 作者:数据小太阳 更新时间:2023-10-29 05:38:17 24 4
gpt4 key购买 nike

这个CSS:

.outer-img-wrap {
border: 2px solid gray;
margin: 1vw auto;
max-width: 192px;
text-align: center;
overflow: hidden;
}
.outer-img-wrap img {
width: auto !important;
height: auto !important;
max-width: 100%;
vertical-align: middle;
}
.inner-img-wrap {
background: #000;
border: thin solid #ff9900;
margin: 2px;
}

应用于此 HTML:

<td style="width: 25%">
<div class="outer-img-wrap">
<div class="inner-img-wrap">
<img src="http://placehold.it/64x64" />
</div>
</div>
</td>

在适当宽度的表格单元格中生成居中响应图像。所有图像最终都具有相同的宽度,这就是我想要的。

我还希望图像以响应方式具有相同的高度。所以我将此 Javascript 添加到页面以更新填充。

function resizeImageElements()
{
var imageElements = $(".outer-img-wrap .inner-img-wrap img");
var imageElementsMaxHeight = -1;
imageElements.map( function(index) {
// compare the height of the img element
if( $(this).height() > imageElementsMaxHeight ) {
imageElementsMaxHeight = $(this).height();
}
} );

imageElements.map( function(index) {
var computeTopBottomPadding = ( imageElementsMaxHeight - $(this).height() ) / 2;
$(this).css( {
"padding-top": computeTopBottomPadding,
"padding-bottom": computeTopBottomPadding,
} );
} );
}

resizeImageElements();

问题是:我可以不用Javascript代码实现同样的效果吗?只使用 CSS?

Fiddlehttp://jsfiddle.net/ybkgLq4d/

最佳答案

嗯,不清楚您是从哪里拍摄这些图像的。如果您能够在后端服务器中处理这些图像(比如使用 PHP、Python 或 ruby​​),您始终可以使用固定比例创建它们的版本,这样它们在前端调整大小时将具有相同的尺寸.这将是我最喜欢的选择。

如果您不能或不想创建不同版本的图像,我相信您最好的选择是使用带有背景图像的元素而不是图像元素本身,并使用 background-size 来适应您的需求。

例如:

.outer-img-wrap {
border: 2px solid gray;
margin: 1vw auto;
max-width: 192px;
text-align: center;
overflow: hidden;
}
.outer-img-wrap .img {
display:inline-block;
position:relative;
vertical-align: middle;
width:100%;
background-position:center center;
height:50px; /* or whatever height you want, you could use % value too relative to it's parent element */

/* cross browser */
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
-webkit-background-size:cover;
background-size:cover;
}
.inner-img-wrap {
background: #000;
border: thin solid #ff9900;
margin: 2px;
}

应用于此 html:

<td style="width: 25%">
<div class="outer-img-wrap">
<div class="inner-img-wrap">
<div class="img" style="background-image:url(http://placehold.it/64x64)"></div>
</div>
</div>
</td>

fiddle :https://jsfiddle.net/ybkgLq4d/14/

关于javascript - 响应图像的垂直填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31281098/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com