如何创建在引导程序 3 中也可以纵向扩展的响应式映像

How to create a responsive image that also scales up in Bootstrap 3

本文关键字：也可以 扩展 映像 响应 何创建 创建 引导程序      更新时间：2023-09-26

我目前正在使用Twitter引导程序3，我在创建响应式图像时遇到了问题。我上过img-responsive课。但是图像大小没有放大。如果我使用 width:100% 而不是 max-width:100%那么它可以完美运行。 问题出在哪里？这是我的代码：

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>

Bootstrap的响应式图像类将max-width设置为100%。这会限制其大小，但不会强制拉伸以填充大于图像本身的父元素。您必须使用 width 属性来强制放大。

http://getbootstrap.com/css/#images-responsive

当然！

.img-responsive是使用 bootstrap 3 使图像响应的正确方法您可以为要响应的图片添加一些高度规则，因为根据责任，宽度会沿着高度变化，修复它，你就在那里。

我不得不做一个小技巧来使图像更大，但保持响应：

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }
}

附言最大宽度可以是你喜欢的任何宽度。

如果无法在图像上设置固定宽度，这里有一个替代解决方案。

有一个带有显示的父div：表格和表格布局：固定。然后将图像设置为显示：表格单元格和最大宽度为 100%。这样，图像将适合其父级的宽度。

例：

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

小提琴：http://jsfiddle.net/5y62c4af/

在 CSS 样式表中尝试以下操作：

.img-responsive{
  max-width: 100%;
  height: auto;
}

尝试这样做：

1） 在您的索引中.html

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

2）以你的风格.css

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}

我发现您可以将 .col 类放在图像上就可以解决问题 - 但是这给了它额外的填充以及与类相关的任何其他属性，例如 float left，但是这些可以通过例如无填充类作为添加来取消。

我想图像比损坏。示例：图像大小为 195 像素 X 146 像素。

它将在平板电脑等较低分辨率下工作。当您拥有 1280 X 800 分辨率时，它会强制变大，因为宽度也有 100 %。也许媒体查询中的CSS像图标字体是最好的解决方案。

相关文章：