CSS响应图像按宽度和高度缩小

Question

我一直在尝试将当前的网站布局迁移到响应式网站，但我遇到了以下问题。在我的图库中，我根据视口输出液柱中的缩略图。我使用媒体查询来实现不同视口的设置，并始终使用宽度作为屏幕宽度的百分比。我有水平和垂直方向的缩略图。缩小效果很好，但在某些时候，当图像开始缩小时，垂直图像变得比水平图像大，并溢出它们的父元素。这就是说我正在寻找一种方法来限制宽度和高度的缩小。例如，如果我使用宽度：16％;身高：0;填充底部：16％;为了实现方形元素，当它的高度等于父元素高度时，想要约束该元素中的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

这可能会解决您的问题。在这段代码中，我认为您可以分配“垂直”字样。和“水平的＆＃39;根据图像的性质对图像进行分类。如果您不知道哪个图像是垂直和水平的，那么您必须在那里使用一个小的js来根据naturalHeight和naturalWidth图像来分配类。

＆＃13;

＆＃13;

.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%;
    }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;