Question

我有以下问题。我希望每个设备的图片代表不同的大小。提供我曾经带过Apple设备的例子。后来我想要一般的媒体查询。但是，图像始终以原始尺寸显示。我的错误在哪里？

另外，我使用bootstrap 3。

HTML的代码

<div class="widewrapper main">
      <img src="dev/img/black_linen_v2.png">
</div>

CSS-代码：

@import '../bootstrap-3.0.3/bootstrap';

/* iPhone 4 (landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
.widewrapper.main img {
            margin-top: 75px;
            height:10px;
            width: 100%;
    }
}

/* iPhone 4 (portrait) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
.widewrapper.main img {
            margin-top: 75px;
            height:10px;
            width: 100%;
    }
}

/* iPhone 5 (landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
.widewrapper.main img {
            margin-top: 75px;
            height:10px;
            width: 100%;
    }
}

/* iPhone 5 (portrait) */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
.widewrapper.main img {
            margin-top: 75px;
            height:10px;
            width: 100%;
    }
}


/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.widewrapper.main img {
            margin-top: 75px;
            height:10px;
            width: 100%;
    }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.widewrapper.main img {
            margin-top: 75px;
            height:10px;
            width: 100%;
    }
}

任何人都可以帮助我吗？对不起，我的英语不好。谢谢。

Answer 1

每个媒体查询中都有相同的代码吗？

.widewrapper.main img {
        margin-top: 75px;
        height:10px;
        width: 100%;
}

因此，您的图像大小相同....您需要在媒体查询中添加不同的值才能看到一些效果。

尝试在不同的媒体查询中更改图像宽度，如宽度：100px或宽度：75％..

然后删除height属性。

Answer 2

你正在覆盖图像属性。所以，尝试将重要信息放在属性旁边以给予最大优先级。不要重视所有属性......

例如， .widewrapper.main img {margin-top：75px！important; height：10px; width：100％！important;}

带有媒体查询的不同大小的图片

2 个答案: