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?

Explanation from the comments

I have suggested that it will probably be nice to crop them, not resize. Center and crop to the size of smaller ones.

回答1:

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%;
}

If your images are just static assets it's better to include the image reference in css.

回答2:

You can't set both height and width at the same time for an image- it will stretch them out. Have made it a 2-column flexbox along with col-lg-6 as per requirement.

See demo below:

.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;
}

<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>

来源：https://stackoverflow.com/questions/38914527/make-two-column-responsive-images-of-same-size

标签

html

css

twitter-bootstrap

image-size