Question

我已经使用自己的HTML和CSS编码制作了一个网站www.carwahi.com，但是以某种方式无法在移动设备上查看时修复页面上的图片库。在移动视图中，图像看起来像是原始图片的一半，覆盖了整个页面的一半。

尽管我无法在此查询区域中查找整个编码，但我在下面提供了我的代码。

我在我的html代码中将图像大小以像素为单位。如果要检查，只需访问我的网站并调整浏览器大小即可查看问题。

<style>
@media screen and (max-width: 700px){
.column.middlehome img{max-width: 100%;}
.column.middlehome{max-width: 100%; padding-right: 0; margin-right: 0;}
.column.sidehome{width: 0%;}
.gallery2 img{max-width: 100%; padding-right: 0; margin-right: 0; padding-left: 8%; margin-left: 0;}
.gallery2{max-width: 100%; margin-right: 0%;}
.containerhero{max-width: 100%;}
}
</style>

Answer 1

您需要在swiper js中设置breakpoints才能在移动设备中进行查看，如下所示：
断点：允许为不同的响应断点（屏幕尺寸）设置不同的参数。

var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        spaceBetween: 30,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            // when window width is <= 320px
            320: {
              slidesPerView: 1,
              spaceBetween: 10
            },
            // when window width is <= 480px
            480: {
              slidesPerView: 1,
              spaceBetween: 20
            },
            // when window width is <= 640px
            640: {
              slidesPerView: 2,
              spaceBetween: 30
            }
        }

 });

工作示例here

Answer 2

我已使用开发人员工具进行了更改，并获得了以下输出。请在您的代码中进行一些更正：

在“照片库”下为图像标签添加一个类，在这里我添加了class="banner"。
在媒体查询@media (min-width: 301px) and (max-width: 700px){.banner{width: 100%;height: auto;}中为横幅添加样式
更改column.middlehome中column.sidehome和@media (min-width: 301px) and (max-width: 700px)的样式

.column.middlehome { width: 100%; margin-right: 0; padding: 10px 0; margin-left: 0; overflow: hidden; }

对于column.sidehome，请更改width:100%

@media (max-width: 700px) and (min-width: 301px) .row1 img除去左侧填充物（汽车和自行车零件）图像的左侧有一些空间。

Answer 3

通过CSS在首页中提供图片。另外，您的列的宽度没有50％，并且包含一些填充。似乎您的sidehome和顶部菜单也不在移动视图中显示。这必须为您完成工作。：）

@media (max-width: 700px) and (min-width: 0px){
 .homecontent img {
   width: 100%;
   padding: 0;
   object-fit: cover;
 }
.column.middlehome {
  width: 50%;
  margin-right: 0%;
  margin-left: 0.5%;
  padding: 10px 0;
  overflow: hidden;
 }
.column.sidehome {
  width: 46%;
  display: block;
  padding-top: 10px;
 }
}

Answer 4

我认为您正在谈论此Photo Gallery Page。您给的固定height和width出现了问题。

<img src="http://www.carwahi.com/Cars Images/Nissan-Kicks-4.jpg" width="1100" height="700">

将代码替换为以下内容：

<img src="http://www.carwahi.com/Cars Images/Nissan-Kicks-4.jpg" width="85%" height="auto">

您可以在此处输入您喜欢的宽度，而不是85％。希望对您有所帮助。

/* --- New Added Styles --- */
@media (max-width: 700px) and (min-width: 301px) {
    .column.sidehome {
        width: 100%;
        display: block;
        padding-top: 10px;
    }
    .column.middlehome {
        width: 100%;
        margin-right: 0%;
        padding: 10px 0;
        margin-left: 0.5%;
        overflow: hidden;
    }
    .flipcontainer1 {
        position: relative;
        width: 100%;
        height: 415px;
    }
    .row1 img {
        width: 100%;
        height: auto;
        padding-right: 0;
        margin-right: 0;
        padding-left: 0;
        margin-left: 0;
    }
    div.gallery2 {
        margin: 20px auto;
        width: 100%;
        height: auto;
        /* float: left; */
        overflow: hidden;
    }
}

Answer 5

滑块在大屏幕上也没有响应

看看是否可行

.homeback{
    width : 100%;
}

Answer 6

@ Partho63，“ Harley”图像及其内容中发生了错误，就像您在我的图像中看到它一样。 “ Harley”区域位于.column.sidehome下，描述位于.containerhero1下。

我的自适应图片库出现问题

6 个答案: