如何为移动设备和不同的媒体查询定位两个图像

Question

我有这个网站：

www.kenyonglover.net

图片的代码在前面。

<div class="row centerdiv style_featured">
    <div class="col-md-7 col-xs-7 col-ms-7">
        <a href="https://bostonperfumery.com/shop?olsPage=products%2Fk-glovers-black-code" target="_blank"><img class="bottlefragranceshomeright img-responsive grayscale" src="images/fragrance/received_350849349195382_resized.jpeg" alt="" title="Click to purchase Kenyon Glover's Black Code Fragrance for Men"></a>
     </div>
     <div class="col-md-5 col-xs-7 col-ms-7">
        <a href="https://bostonperfumery.com/shop?olsPage=products%2Fk-glovers-endless-love-for-women" target="_blank"><img class="bottlefragranceshomeleft img-responsive grayscale" src="images/fragrance/received_736852273421347_resized.jpeg" alt=""  title="Click to purchase Kenyon Glover's Endless Love Fragrance for Women"></a>
    </div>
</div>

该网站在大屏幕上显示良好，但当它缩小到移动设备时，图像就会消失。

CSS:

.bottlefragrances {
    width: 250px;
    height: auto;
}
.bottlefragranceshomeleft {
    margin-left: 125px !important;
    width: 150px !important;
    float: left !important;
}
.bottlefragranceshomeright {
    margin-left: 100px !important;
    width: 150px !important;
    float: right !important;
}

/* Grayscale rollover */
.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
.grayscale:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}
.centerdiv {
    margin-left: auto !important;
    margin-right: auto !important;
}

我的目标是让图像变小并随着屏幕视口的变化而堆叠。

我需要一组媒体查询才能在我修改过的模板上进行这项工作。

更新：

所以我实施了建议的解决方案，但得到了这个...

图片不高。我从图像上的 class 中删除了 img-responsive ，认为就是这样。

更新二：

我明白了！

这是基于我投票的解决方案的解决方案。

在第一个

下面添加了另一个媒体查询

@media (min-width: 320px) and (max-width: 767px) {
    .introduction{
        float: none;
        position: relative;
        background-image: url('http://www.kenyonglover.net/images/fragrance/DSC_0134-Hi%20Res_resized.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
        padding: 20px;
    }
    .introduction > img{
        display: none
    }
    .bottlefragranceshomeright, .bottlefragranceshomeleft {
        margin: auto !important;
        width: 150px !important;
        float: none !important;
        position: relative !important;
        height: 145px !important;
    }
    .intro-content h1{
        font-size: 28px;
    }
    .intro-content h2{
        font-size: 17px
    }
}
@media (min-width: 768px)and(max-width: 1440px) {
    .introduction{
        float: none;
        position: relative;
        background-image: url('http://www.kenyonglover.net/images/fragrance/DSC_0134-Hi%20Res_resized.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
        padding: 20px;
    }
    .introduction > img{
        display: none
    }
    .bottlefragranceshomeright, .bottlefragranceshomeleft {
        margin: auto !important;
        width: 150px !important;
        float: none !important;
        position: relative !important;
        height: auto !important;
    }
    .intro-content h1{
        font-size: 28px;
    }
    .intro-content h2{
        font-size: 17px
    }
}

并为图像调整 CSS，如下所示：

.bottlefragrances {
    width: 250px;
    height: auto;
}
.bottlefragranceshomeleft {
    margin-left: 175px;
    width: 150px !important;
    float: left !important;
}
.bottlefragranceshomeright {
    margin-left: 145px;
    width: 150px !important;
    float: right !important;
}

最后，HTML 就像这样...

                <div class="row centerdiv style_featured">
                    <div class="col-md-6 col-xs-6 col-ms-7">
                        <a href="https://bostonperfumery.com/shop?olsPage=products%2Fk-glovers-black-code" target="_blank"><img class="bottlefragranceshomeright grayscale" src="images/fragrance/received_350849349195382_resized.jpeg" alt="" title="Click to purchase Kenyon Glover's Black Code Fragrance for Men"></a>
                    </div>
                    <div class="col-md-6 col-xs-6 col-ms-7">
                        <a href="https://bostonperfumery.com/shop?olsPage=products%2Fk-glovers-endless-love-for-women" target="_blank"><img class="bottlefragranceshomeleft grayscale" src="images/fragrance/received_736852273421347_resized.jpeg" alt=""  title="Click to purchase Kenyon Glover's Endless Love Fragrance for Women"></a>
                    </div>
                </div>

Answer 1

在 responsive.css 末尾添加此代码以获得与图像类似的结果

@media (min-width: 320px) and (max-width: 767px) {
    .introduction{
        float: none;
        position: relative;
        background-image: url('http://www.kenyonglover.net/images/fragrance/DSC_0134-Hi%20Res_resized.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
        padding: 20px;
    }
  .introduction > img{
        display: none
    }
    .bottlefragranceshomeright, .bottlefragranceshomeleft{
      margin: auto !important;
      width: auto !important;
      float: none !important;
      position: relative !important;
      height: 60px !important;
    }
    .intro-content h1{
      font-size: 28px;
    }
    .intro-content h2{
      font-size: 17px
    }
}

更改 img 容器 class 来自：

<div class="col-md-7 col-xs-7 col-ms-7">

到

<div class="col-md-7 col-xs-6 col-ms-7">

结果

如何为移动设备和不同的媒体查询定位两个图像

How to position two images for mobile devices and different media queries

html

css

media-queries