我有不同大小的图片,但想让它们看起来在页面上的宽度和高度相等。我做了什么:
HTML
<div class="col-lg-6">
<img src = "assets/img/101.jpg" alt="Null" />
</div>
CSS
#images img {
width: 100%;
padding-bottom: 4em;
position: center;
}
但他们看起来像那样:
他们有不同的身高。 如何使它平等? 可能我需要按高度和中心裁剪它们而不改变宽度。有可能吗?
我已经建议裁剪它们可能会很好,而不是调整大小。中心和裁剪到较小的那个。
答案 0 :(得分:1)
要获得对图像的更多控制,最好切换到背景图像。然后,您可以使用background-size: cover
填写div。
HTML
<div class="col-lg-6">
<div class="image-holder" style="background-image: url('assets/img/101.jpg');">
</div>
</div>
<div class="col-lg-6">
<div class="image-holder" style="background-image: url('assets/img/101.jpg');">
</div>
</div>
CSS
.image-holder {
background-size: cover;
background-position: center center;
height: 400px;
width: 100%;
}
如果您的图像只是静态资源,最好在css中包含图像引用。
答案 1 :(得分:0)
您无法同时为图像设置高度和宽度 - 它会将它们拉伸出来。根据要求将其与col-lg-6
一起制作成2列弹性箱。
见下面的演示:
.box {
border: 1px solid #ddd;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 50%;
min-width: 200px;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.col-lg-6.box {
padding: 15px;
}
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" />
<div class="container">
<div class=" col-lg-6 box">
<img src="http://placehold.it/150x100" alt="Null" />
</div>
<div class=" col-lg-6 box">
<img src="http://placehold.it/75x75" alt="Null" />
</div>
<div class=" col-lg-6 box">
<img src="http://placehold.it/150x50" alt="Null" />
</div>
<div class=" col-lg-6 box">
<img src="http://placehold.it/150x150" alt="Null" />
</div>
</div>
&#13;