CSS 响应式 img 按宽度和高度缩小

Question

我一直在尝试将我当前的网站布局迁移到响应式布局，但我遇到了以下问题。在我的图片库中，我根据视口(viewport)在液体列中输出缩略图。我使用媒体查询来针对不同的视口(viewport)实现这一点，并且始终使用宽度作为屏幕宽度的百分比。我有水平和垂直方向的缩略图。缩小效果很好，但在某些时候，当图像开始缩小时，垂直图像变得比水平图像大并溢出它们的父元素。话虽这么说，我正在寻找一种方法来限制宽度和高度的缩小。例如，如果我使用 width: 16%;高度:0；底部填充:16%；要实现正方形元素 a 想约束该元素内的 img，以便在其高度等于父元素高度时相应地缩放。

是否有针对该问题的纯 CSS 解决方案？

这是我的代码:

.photo-list {
	padding: 45px 0 0 0;
    width: 100%;
}

.photo-thumb {
    display: inline-block;
    margin: 2% 2% 2% 2%;
    padding-bottom: 16%;
    width: 16%;
    height: 0;
    vertical-align: top;
    text-align: center;
    background-color: grey;
    }

.photo-thumb img {
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width : 1440px),
only screen and (max-device-width : 1440px){
    .photo-thumb {
    width: 21%;
    padding-bottom: 21%;
    }
}

@media only screen and (max-width : 1080px),
only screen and (max-device-width : 1080px){
    .photo-thumb {
    width: 29.3333%;
    padding-bottom: 29.3333%;
    }
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
    .photo-thumb {
    width: 46%;
    padding-bottom: 46%;
    }
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    .photo-thumb {
    width: 96%;
    padding-bottom: 96%;
    }
}

<ul class="photo-list clear">
    <li class="photo-thumb">
        <img alt="somewhere far beyond" src="http://lorempixel.com/300/200/nature/">
    </li>
    <li class="photo-thumb">
        <img alt="into the wild" src="http://lorempixel.com/300/200/city/">
    </li>
    <li class="photo-thumb">
        <img alt="missing summer" src="http://lorempixel.com/200/300/sports/">
    </li>
    <li class="photo-thumb">
        <img alt="light trails" src="http://lorempixel.com/200/300/business/">
    </li>
    <li class="photo-thumb">
        <img alt="living tree" src="http://lorempixel.com/300/200/fashion/">
    </li>
    <li class="photo-thumb">
        <img alt="end of day" src="http://lorempixel.com/300/200/nature/">
    </li>
    <li class="photo-thumb">
        <img alt="ray of light" src="http://lorempixel.com/200/300/city/">
    </li>
</ul>

感谢任何帮助!

干杯，杰罗姆

Answer 1

这可能会解决您的问题。在此片段中，我认为您可以根据图像的性质为图像分配“垂直”和“水平”类。如果您不知道哪个图像是垂直的和水平的，那么您必须在那里使用一些 js 来根据图像的 naturalHeight 和 naturalWidth 分配类。

.photo-list {
	padding: 45px 0 0 0;
    width: 100%;
}

.photo-thumb {
    position: relative;
    display: inline-block;
    margin: 2% 2% 2% 2%;
    padding-bottom: 16%;
    width: 16%;
    height: 0;
    vertical-align: top;
    text-align: center;
    }
.thumb-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.photo-thumb img {
    position: relative;
}
.photo-thumb img.vertical {
    height: 100%;
    width: auto;
}
.photo-thumb img.horizontal {
    width: 100%;
    height: auto;
}

@media only screen and (max-width : 1440px),
only screen and (max-device-width : 1440px){
    .photo-thumb {
    width: 21%;
    padding-bottom: 21%;
    }
}

@media only screen and (max-width : 1080px),
only screen and (max-device-width : 1080px){
    .photo-thumb {
    width: 29.3333%;
    padding-bottom: 29.3333%;
    }
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
    .photo-thumb {
    width: 46%;
    padding-bottom: 46%;
    }
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    .photo-thumb {
    width: 96%;
    padding-bottom: 96%;
    }
}

<ul class="photo-list clear">
    <li class="photo-thumb">
        <div class="thumb-container">
            <img class="horizontal" alt="somewhere far beyond" src="http://lorempixel.com/300/200/sports/">
        </div>
    </li>
    <li class="photo-thumb">
        <div class="thumb-container">
            <img class="horizontal" alt="into the wild" src="http://lorempixel.com/300/200/sports/">
        </div>
    </li>
    <li class="photo-thumb">
        <div class="thumb-container">
            <img class="vertical" alt="missing summer" src="http://lorempixel.com/200/300/sports/">
        </div>
    </li>
    <li class="photo-thumb">
        <div class="thumb-container">
            <img class="vertical" alt="light trails" src="http://lorempixel.com/200/300/sports/">
        </div>
    </li>
    <li class="photo-thumb">
        <div class="thumb-container">
            <img class="horizontal" alt="living tree" src="http://lorempixel.com/300/200/sports/">
        </div>
    </li>
    <li class="photo-thumb">
        <div class="thumb-container">
            <img class="horizontal" alt="end of day" src="http://lorempixel.com/300/200/sports/">
        </div>
    </li>
    <li class="photo-thumb">
        <div class="thumb-container">
            <img class="vertical" alt="ray of light" src="http://lorempixel.com/200/300/sports/">
        </div>
    </li>
</ul>