使用百分比宽度和高度裁剪和调整图像大小

Question

我想做一篇文章预览，你几乎可以在每个商店看到。

我的问题是div内部的图像。页面应该是响应的，为什么div的宽度和高度是百分比值。我现在的问题是，如何在div中裁剪和居中图像？

这是我的代码：

＆＃13;

＆＃13;

9F48

＆＃13;

*{
    margin: 0px;
    padding: 0px;
}

.wrapper{
    width: 100%;
}

.articlePreview{
    display: inline-block;
    
    width: 15%;
    height: 15%;
    
    max-width: 15%;
    max-height: 15%;
    
    margin: 1%;
    padding: 1%;
    
    background-color: orange;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以为每个图像指定与查看窗口大小相对应的相同高度。例如。在你的CSS中10vh等。这样，所有图像将保持相同的高度，具体取决于窗口的大小。您正在使用div上设置的类而不是图像本身。如果您使用添加到图像中的类，则可以指定高度，填充等。

例如......

.img {
  height: 10vh;
  width: 10vh;
}

现在它们都有相同的尺寸。如果图像不是正方形，它会扭曲图像。这是一个很好的起点。

Answer 2

这应该有帮助

＆＃13;

＆＃13;

*{
    margin: 0px;
    padding: 0px;
}
body, html
{
  width:100%;
  height:100%;
}

.wrapper{
    width: 100%;
    height: 100%;
}

.articlePreview{
    display: inline-block;
    width: 15%;
    height:15%;
    
    max-width: 15%;
    max-height:15%;
    margin: 1%;
    padding: 1%;
    
    background-color: orange;
}
.imgPreview
{
  width:100%;
  height:80%;
}
.img
{
  width:100%;
  height:100%;
}
.imgTitle
{
  width:100%;
  height:20%;
  font-size: 2vmax;
}

＆＃13;

<div class="wrapper">
            <div class="articlePreview">
                <div class="imgPreview">
                    <img class="img" src="http://lorempixel.com/500/200"/>
                </div>
                <div class="imgTitle">
                  <a href="#">I'm a link</a>
                </div>
            </div>
            
            <div class="articlePreview">
                <div class="imgPreview">
                    <img class="img" src="http://lorempixel.com/200/500"/>
                </div>
                <div class="imgTitle">
                  <a href="#">I'm a link</a>
                </div>
            </div>
            
            <div class="articlePreview">
                <div class="imgPreview">
                    <img class="img" src="http://lorempixel.com/100/100"/>
                </div>
                <div class="imgTitle">
                  <a href="#">I'm a link</a>
                </div>
            </div>
</div>

＆＃13;

＆＃13;

＆＃13;