问题描述
我有不同大小的图像,但是要使它们在页面上的宽度和高度看起来相等.我做了什么:
I have differently sized images, but want to make them look equal by width and height on the page. What I did:
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;
}
但是它们看起来像这样:
But they look like that:
它们的高度不同.如何使其相等?可能我需要在不改变宽度的情况下按高度和中心对其进行裁剪.有可能吗?
They have different height.How to make it equal?Probably I need to crop them by height and center without changing the width. Is it possible?
我建议裁剪它们而不是调整大小可能会很好.居中并裁剪为较小的尺寸.
I have suggested that it will probably be nice to crop them, not resize. Center and crop to the size of smaller ones.
推荐答案
要获得对图像的更多控制权,最好切换到背景图像.然后,您可以使用background-size: cover
填写div.
To gain more control over your images it's best to switch to background images. You can then use background-size: cover
to fill out the 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中.
If your images are just static assets it's better to include the image reference in css.
这篇关于制作两个相同大小的列响应图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!