Question

我试图让它成为一个响应式图像，它不会在任何屏幕分辨率的div底部显示空间。

我网站的链接是107.170.157.210/wireless/（注意：解决问题后我会删除此链接，但我会留下其他问题，以防其他人需要）

特殊问题在于html的这一部分：

<!-- This is inside the .intro class --> 
<div class="col-sm-7 col-md-7">
<div class="intro-img">
    <img src="img/Models_tall.png" class="img-responsive" alt="Responsive image" />
</div>
</div>

相应的CSS是

.intro {
    max-width:100%;
  max-height:590px;
  height:auto;
    position:relative;
  background-color:#67B0D1;
}


.intro-img{
 /*I had stuff here but got rid of it because I'm bad at css*/
}

在某些分辨率上图像可能看起来不错，但是例如，如果我将浏览器窗口设置为屏幕尺寸的一半，我的显示器上的图像下面会有很多蓝色空间，我希望它在底部的蓝色div（介绍）。

Answer 1

只需从实际拥有该图片的col-sm-7 col-md-7父.intro-img移除div即可。在调整浏览器窗口大小或在较小的设备上时，这不会显示剪切部分显示。但是在某些分辨率下，右侧不会显示完整的图像。

另一种解决方案可以是

.col-sm-7.col-md-7 { /* change selector otherwise this will select all bootstrap .col-sm-7.col-md-7 */
position: absolute; 
bottom: 0px; 
right: 0px;
}

为此，您必须通过CSS或通过adobe Photoshop等工具手动调整图片大小。

使用引导程序将响应图像对齐到div的底部

1 个答案: