@Media for image design
@Media for image design
提问于 2016-02-08 17:48:46
我在一个站点上工作，当设备宽度超过425‘t时，我有两个需要是inline的(min-width: 425px)，但由于某些原因，它似乎无法工作，它和@media的css也不一样，但由于某些原因，它不工作，尽管它非常基本。
码
.info-img {
width: 49.75%;
}
.info-images {
display: inline-block;
text-align: center;
}
@media screen and only (max-width: 425px) {
.info-img {
width: 100%;
padding-bottom: 1px;
}
.info-images {
display: block;
text-align: center;
}
}<div class="info-images">
<img src="https://dl.dropboxusercontent.com/s/dd5exdwwpa13yxnthg/unspecified-4.jpeg?dl=0" class="info-img">
<img src="https://dl.dropboxusercontent.com/s/fo3bt6ruhx4qppztho/unspecified-6.jpeg?dl=0" class="info-img">
</div>
</div>
<style type="text/css">
@import url('https://dl.dropboxusercontent.com/s/ikcsorhvohzdipo/information.css?dl=0');
</style>
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-08 17:54:28
问题在于，您将inline-block交给了家长而不是img，而且您错误地编写了媒体(不是@media screen and only，而是@media only screen and)。
片段
.info-images {
font-size: 0;
/* fix inline-block gap */
}
.info-img {
width: 50%;
display: inline-block;
vertical-align:top; /* may be necessary */
box-sizing: border-box;
padding: 0 1%
}
@media only screen and (max-width: 425px) {
.info-img {
width: 100%;
padding-bottom: 1px;
}
.info-images {
display: block;
text-align: center;
}
}<div class="info-images">
<img src="//lorempixel.com/1600/900" class="info-img">
<img src="//lorempixel.com/1600/900" class="info-img">
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35276026
复制相关文章
相似问题
腾讯云开发者
