响应式图像未按移动设备应有的方式显示答案

【问题标题】：Responsive images not appearing as they should for mobile响应式图像未按移动设备应有的方式显示
【发布时间】：2017-04-21 10:20:51
【问题描述】：

在移动设备上显示响应式图片时出现问题。网站的 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（最小宽度：@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;
}

【问题讨论】：

标签： html css

【解决方案1】：

尝试在 head 标签上添加元数据

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

【讨论】：

谢谢，但已经添加