Bootstrap不同尺寸图片同维度排版问题求助

Hey there! Let's tackle this image sizing issue you're facing. The problem with your current CSS is that setting height:250px and width:100% forces the images to stretch or squish to fit those dimensions, which distorts their original aspect ratios. Here are a few reliable solutions to get your images looking uniform without distortion:

Solution 1: Use object-fit (Simplest Fix) #

This CSS property lets you control how an image fits into its container while preserving its aspect ratio. Update your CSS like this:

.thumbnail img {
  height: 250px;
  width: 100%;
  object-fit: cover; /* Crops the image to fill the container without distortion */
  /* Optional: Adjust which part of the image is shown */
  object-position: center;
}

• object-fit: cover: Clips the image to fill the container, keeping the aspect ratio. Great if you don't mind cropping edges.
• object-fit: contain: Fits the entire image inside the container, which might leave empty space around it if the aspect ratio doesn't match.

Solution 2: Bootstrap img-fluid with Fixed Container Height #

If you prefer using Bootstrap's built-in classes, you can fix the height of the .thumbnail container and let the image adapt naturally:

<div class="row">
  <div class="col-md-4">
    <div class="thumbnail" style="height: 250px; overflow: hidden;">
      <a href="http://placehold.it/2048x1536" target="_blank">
        <img src="http://placehold.it/2048x1536" alt="Nature" class="img-fluid">
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail" style="height: 250px; overflow: hidden;">
      <a href="http://placehold.it/1280x720" target="_blank">
        <img src="http://placehold.it/1280x720" alt="Nature" class="img-fluid">
      </a>
    </div>
  </div>
</div>

• The img-fluid class makes the image responsive to the container width.
• overflow: hidden clips any part of the image that exceeds the fixed 250px height, keeping the container dimensions consistent.

Solution 3: Use Background Images #

Another approach is to set the images as background of the .thumbnail links, which gives you full control over sizing and positioning:

<div class="row">
  <div class="col-md-4">
    <a href="http://placehold.it/2048x1536" target="_blank" class="thumbnail d-block" style="height:250px; background-image:url('http://placehold.it/2048x1536'); background-size:cover; background-position:center;"></a>
  </div>
  <div class="col-md-4">
    <a href="http://placehold.it/1280x720" target="_blank" class="thumbnail d-block" style="height:250px; background-image:url('http://placehold.it/1280x720'); background-size:cover; background-position:center;"></a>
  </div>
</div>

• d-block ensures the anchor tag fills the column width.
• background-size: cover scales the image to cover the container, and background-position:center keeps the focal point of the image centered.

All these methods will make your two images appear to have the same visual dimensions while maintaining their original aspect ratios. The object-fit method is usually the most straightforward since it only requires a CSS tweak!

内容的提问来源于stack exchange，提问作者Ajzz