如何使我的图像尺寸修复但不损害/变形其外观？

Question

我在项目中使用图片时遇到问题。我希望它看起来就像前两张图片一样。当我试图通过CSS修复图像的高度时，它变得很丑陋。有没有一种方法可以自行调整大小而不像第三张图像那样重叠？

CSS：

.product-image-wrapper{
 border:1px solid #F7F7F5;
 overflow: hidden;
 margin-bottom:30px;
 }

.single-products {
 position: relative;
 }

.new, .sale {
 position: absolute;
 top: 0;
 right: 0;
 }

.productinfo h2{
 color: #FE980F;
 font-family: 'Roboto', sans-serif;
 font-size: 24px;
 font-weight: 700;
 }
.product-overlay h2{
 color: #fff;
 font-family: 'Roboto', sans-serif;
 font-size: 24px;
 font-weight: 700;
 }


.productinfo p{
 font-family: 'Roboto', sans-serif;
 font-size: 14px;
 font-weight: 400;
 color: #696763;
 }

.productinfo img{
 width: 100%;
 }

.productinfo{
position:relative;
}

.product-overlay {
 background:#FE980F;
 top: 0;
 display: none;
 height: 0;
 position: absolute;
 transition: height 500ms ease 0s;
 width: 100%;
 display: block;
 opacity:;
 }

.single-products:hover .product-overlay {
display:block;
height:100%;
}


.product-overlay .overlay-content {
bottom: 0;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}

.product-overlay .add-to-cart {
background:#fff;
border: 0 none;
border-radius: 0;
color: #FE980F;
font-family: 'Roboto', sans-serif;
font-size: 15px;
margin-bottom: 25px;
}

.product-overlay .add-to-cart:hover {
background:#fff;
color: #FE980F;
}


.product-overlay p{
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
color: #fff;
}

JSFiddle

  

我的实际页面是什么样的：

Answer 1

将图像裁剪为合适尺寸可能是您最好的选择。其他替代方案是创建一个包围第三个图像的div，并给出div精确的尺寸并设置overflow:hidden。这将基本上裁剪图像。老实说，我认为你最好自己裁剪图像，因为这样可以更容易地控制出现的图像。如果你想避免拉伸，你必须以某种方式处理裁剪。