制作两个相同大小的列响应图像 [英] Make two column responsive images of same size

问题描述

我有不同大小的图像，但是要使它们在页面上的宽度和高度看起来相等.我做了什么:

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');">
    &nbsp;
  </div>
</div>
<div class="col-lg-6">
  <div class="image-holder" style="background-image: url('assets/img/101.jpg');">
    &nbsp;
  </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.

这篇关于制作两个相同大小的列响应图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！