Question

显示移动设备的响应式图像时出现问题。网站的1行有6个单独的图像，但移动图像在1行显示为2个图像，然后在下一行显示1个图像，然后在下一行显示2个图像，在最后一行显示1个图像。当我将鼠标悬停在移动设备上的第一张图像上时，所有图像都显示为3行上的2张图像，尝试了所有内容以解决此问题但无法解决。我在下面添加了HTML和CSS代码。

enter code here

<div class="col-md-10">
<div class="xtx">
<a href="x"> <img src=".png"  class="pull-left img-responsive" alt="" width="150" height="150"></a>

<a href="x"> <img src=".png"  class="pull-left img-responsive" alt="" width="150" height="150"></a>

<a href="x"> <img src=".png"  class="pull-left img-responsive" alt="" width="150" height="150"></a>

<a href="x"> <img src=".png"  class="pull-left img-responsive" alt="" width="150" height="150"></a>

<a href="x"> <img src=".png"  class="pull-left img-responsive" alt="" width="150" height="150"></a>

<a href="x"> <img src=".png"  class="pull-left img-responsive" alt="" width="150" height="150"></a>
 </div>

/ *超小型设备（手机，小于768px） / / 没有媒体查询，因为这是Bootstrap中的默认值 / / 小型设备（平板电脑，768px及以上）* / @media（min-width：@ screen-sm-min）{...}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
.body{
background-color:#fff;
}
.fdr img{
float:left;
margin:1%;
background-color: #fff;
border-radius: 5px;
clear: right; 
-webkit-transition: margin 0.5s ease-out; 
-moz-transition: margin 0.5s ease-out; 
-o-transition: margin 0.5s ease-out; 
}
.fdr img:hover{
margin-top:0.1%;
}
.img-responsive{
display:block;
margin:auto;
}

Answer 1

尝试在head标签上添加meta

<html>
    <head>
        <lang="en">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
    </head>

响应式图片无法显示为移动设备

1 个答案: