html - 如何保持具有不同比例的图像大小相同？

Question

我有产品页面，有 4 个引导列。我正在通过 CMS 编辑器添加产品。下面是单品的HTML结构。现在，产品图片有不同的比例。所以当我添加它们时，它们以不同的高度和宽度显示。如何在不同尺寸的屏幕上保持相同尺寸。

<div class="row">
    <div class="col-sm-3">
        <p>
        <img src="PowerAbWheel.jpg" alt="PowerAbWheel.jpg" style="display:block;          margin: auto;">
        </p>
        <p style="text-align: center;"><strong>Power Ab Wheel<br></strong>
        <strong>Price:</strong> 
        <a href="# style="font-size: 20px;">$37.95</a></p>
</div>
</div>

这是页面截图

Answer 1

希望图像的比例相同。通过max-height 和max-width 限制所有图片!

.grid {display: block; overflow: hidden; margin: 0; padding: 0; list-style: none;}
.grid li {width: 32%; float: left; margin: 0.5%; height: 80px; display: block; background: #ccf;}
.grid li img {max-width: 100%; max-height: 75px; border: 1px solid #999; display: block; margin: 2px auto;}

<h3>Same Proportions</h3>
<ul class="grid">
  <li><img src="http://placehold.it/350x150" alt=""></li>
  <li><img src="http://placehold.it/700x300" alt=""></li>
  <li><img src="http://placehold.it/175x75" alt=""></li>
  <li><img src="http://placehold.it/700x300" alt=""></li>
  <li><img src="http://placehold.it/700x300" alt=""></li>
</ul>
<h3>Different Proportions</h3>
<ul class="grid">
  <li><img src="http://placehold.it/350x150" alt=""></li>
  <li><img src="http://placehold.it/300x300" alt=""></li>
  <li><img src="http://placehold.it/175x750" alt=""></li>
  <li><img src="http://placehold.it/500x320" alt=""></li>
  <li><img src="http://placehold.it/750x100" alt=""></li>
</ul>