Question

当您转到this site时，您会看到滑块（标题中）上的图像具有不同的高度。我尝试使用此代码对所有图像使用相同的高度：

.carousel .slider img { 
    max-height: 600px
}

这有效，但后来我遇到图像失真的问题。

有没有办法解决这个问题，就像在高度超过600px时切割图像一样？

Answer 1

如果您想为所有图像使用相同的宽度和高度，可以使用以下内容：

<div id="slider">
    <img src="http://ragazzon-schweiz.your-click.ch/wp-content/uploads/2015/02/rag-golf-141218-9926-edit.jpg">
</div>

#slider{
    height:600px;
    max-height:600px;
    width:100%;
    overflow:hidden;
}

#slider img{
    width:100%;
}

Answer 2

只需添加img标签本身的宽度，浏览器就会使其成为正确的比例高度：

<img src="img.png" width=200 />

滑块中所有图像的高度相同，不会破坏图像

2 个答案: