Html img响应和div标记的引导问题 |

当我使用

img responsive

时，当 浏览器增加了“平板电脑大小”。但对于手机大小和平板电脑大小的浏览器来说，它是完美的。 当我将

img responsive

更改为

image fluid

时，图像大小 是我想要的桌面大小的浏览器。 但是在调整浏览器大小的过程中，

元素在其上重叠。另外，当我将浏览器大小调整为“移动大小”（使用

图像流体

）时，我的图像会有一个水平滚动条，因为它不会调整大小，并保持在桌面大小浏览器上的状态。 我的代码中需要删除哪些内容才能使其在所有屏幕上都具有响应性（高度和宽度都具有响应性？

我的第二个问题是，我必须使用一个空的

div

（从左到右）2列来将我的图像放置在屏幕的中心（从上到下的第三行）。我可以将我的

div

（使用

col-*-*

）放置在中间，而不使用任何空的

div

标记吗？有css代码吗

我使用了

左填充：12%

使

的大小变小，并位于列的右侧。是否可以调整其大小并将其放置在右侧，而无需使用

填充左侧

---

对于第一个问题，我通过在图像上设置

style=“max width:100%；height:auto；”“

（max width防止图像溢出，height auto保持比例）找到了一个快速解决方法

您的第二个问题只是缺少一个引导类：col-XX-offset-X，在您的示例中，您需要设置

对于第三个问题，可以通过在右对齐的元素上设置

宽度

和

左边距

来避免填充，如下所示：

---

希望对您的第一个问题有所帮助，我通过在图像上设置

style=“max width:100%；height:auto；”“

（max width防止图像溢出，height auto保持比例）找到了一个快速解决方法

您的第二个问题只是缺少一个引导类：col-XX-offset-X，在您的示例中，您需要设置

对于第三个问题，可以通过在右对齐的元素上设置

宽度

和

左边距

来避免填充，如下所示：

---

希望这能有所帮助

嗨，阿曼，如果你能用一个更好的标题来框定这个问题，更多的人将能够在这里提供帮助，也许这表明你在使用Bootstrap时遇到了问题？你正在使用的Bootstrap版本是什么？@horyd是的，它在Bootstrap中，因为我的图像在使用image fluid时不会调整大小，使用img responsive时会变得太小。@VladimirJovanovićBootstrap v3.3.7（如Bootstrap.css所示）嗨，Aman，如果你能用更好的标题来框定问题，更多的人将能够在这里提供帮助，也许这表明你在使用Bootstrap时遇到了问题？你正在使用的Bootstrap版本是什么？@horyd是的，它在Bootstrap中，因为我的图像在使用图像流体时不会调整大小，在使用img responsive时会变得太小。@VladimirJovanovićBootstrap v3.3.7（如Bootstrap.css所示）解决了第三个问题。但其余两个仍然是一样的。在桌面大小的浏览器中，图像很小，且div标签为空。第三个问题的解决方案有效。但其余两个仍然是一样的。在桌面大小的浏览器和空的div标记中，图像很小。

<div class="container-fluid text-center" style="background-color:#1a242f;">
    <div class="row">
        <div class="col-sm-2">
        </div>
        <div class="imageheader col-sm-4">
            <a href="index.php">    
                <img class="img-responsive" src="images/logo & name.jpg">
            </a>
        </div>
        <div class="search col-sm-4" style="padding-left : 12%;">
            <ul class="list-group" style="background-color: #6ABED8;">
                <li>
                    <a href="careersatbvimit.php" style="color: white;">
                        Career's At BVIMIT
                    </a>&nbsp;&nbsp;|
                </li>
                <li>
                    <a href="studentlogin.php" style="color: white;">
                        &nbsp;&nbsp; Student Login
                    </a>
                </li>
            </ul>
    <br><br><br><br>
          <p class="socialicons" style="color : #f4511e; margin-left: 40%;">
            <a href="#" class="fa fa-facebook logo" style="color: #48A6BD"></a>
            <a href="#" class="fa fa-twitter logo" style="color: #48A6BD"></a>
            <a href="#" class="fa fa-youtube logo" style="color: #48A6BD"></a>
          </p>
        </div>
        <div class="col-sm-2">
        </div>
    </div>
</div>