我有一个调整大小后的图像网格(原始图像比使用Bootstrap的网格设置要大。

我遇到一个问题,如果我减小窗口的宽度,而不是保持相同的调整大小并响应较小的宽度,则会拉伸每个图像(大于其原始大小)以适合div的宽度。

有什么帮助吗?

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-12 group">
      <h4>Unsorted Pictures</h4>
      <div class="row">
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
        <div class="col-md-1"><img src="../img/image.jpg" class="image"></div>
</div>
</div>
</div>
</div>

CSS:

.rectangle {
  border: 1px solid black;
}

.group {
  border: 1px solid black;
  height: 300px;
  overflow: scroll;

  text-align: center;
}

.unsorted {
  height: 190px;
}

.image {
  min-width: 100%;
  max-width: 100%;
  height: auto;
}

容器的最大宽度为1024px。

#1楼 票数:2

从.image类中删除最小宽度声明。

.image {
    /* min-width: 100%; REMOVE THIS */
    max-width: 100%;
    height: auto;
}

这是您在Bootply中使用我的解决方案的标记。 看起来工作正常。

http://www.bootply.com/rx9NWTMq9f

#2楼 票数:0

您的.image类具有基于百分比的动态宽度集。 它将始终根据其容器而变化。

您有两种选择。

  1. 删除min-width: 100%; 这会将图像设置为其容器的大小。

  2. 如果要使其保持静态,请尝试将其更改为像素等固定测量值。

  ask by gchan translate from so

未解决问题?本站智能推荐:

1回复

Bootstrap-是否可以根据列大小调整图像大小?

我正在使用Bootstrap创建图片库。 全屏时看起来不错 最小尺寸看起来不错 但是在调整大小时,它会执行此操作 我希望第一个图像(树木)与第二个图像(湖泊)一样宽,并且我尝试过调整宽度/最大宽度,但是问题是当第二个图像不能缩小时图片已准备好与第一张图片对齐。 当图像为c
6回复

拉伸图像以适合整个容器宽度的引导程序

我有一个 1300 像素宽的图像,使用引导程序我希望这个图像填充我设置为 1300 像素的容器的整个宽度。 我创建了一行,给它一个完整的 12 列,然后在图像中添加一类图像响应。 有了这个设置,我得到了下面的输出。 我希望我的图像一直延伸到我的图像在我的内容中的位置,这是我的代码。 图像设置为宽度
2回复

Bootstrap:等高图像的响应行,宽度基于图像长宽比

我觉得我已经阅读了大约20篇左右的类似文章,但是似乎都没有我想要的东西。 问题: 我有一排图像(例如说3张)。 每个图像具有不同的纵横比。 我想连续显示所有图像,以使它们的高度相等。 包含图像的列的宽度是可变的。 我自己并没有固定高度,也不想随意限制图像的高度。 图像(及其填充
12回复

如何使Bootstrap卡中的图像具有相同的高度/宽度?

所以这是我的代码,它显示 6 张卡片,三张横排两行。 我希望所有图像的大小都相同,而无需手动调整图像大小。 响应性确实有效,我使用“img-fluid”作为一个类,当我转到移动或更小的浏览器时,它们都具有相同的宽度,但高度仍然关闭。 这是我得到的图像,这就是我想要得到的所有大小相同的图像。
1回复

如何在Bootstrap轮播中设置图像的最大宽度并保持宽高比?

我正在使用Bootstrap 4 alpha6,并且正在寻找一种方法来设置轮播中图像的最大宽度,同时保持宽高比。 设定height: auto; 似乎不起作用。 这是我的代码笔: http ://codepen.io/anon/pen/bqWObN?editors=1100 任何帮
5回复

css:使背景图像适合div的高度和宽度

在引导模板中,我正在添加一个图像作为背景,就像这样 这些 css 规则的问题是图像被剪裁仅显示图像的中心部分,这是根据 div 的高度添加的我希望图像显示为其全高度,而不是仅显示小的中心部分。 查看屏幕截图以更好地理解
1回复

无法将图像高度拉伸到Bootstrap中的div大小

我尝试了maxheught / width,显示选项等,我还为图像添加了.img响应类。 它的宽度都可以,但是Iam无法获得所需的高度,无法匹配div的比例。 这是我的HTML。 和CSS:
3回复

为什么Bootstrap卡不包含图像?

我正在使用他们文档中的当前Bootstrap卡: 但是当添加我的图像时,它会溢出卡容器,如下所示: 我试过改变图像的大小但无济于事: 我也尝试过添加bootstrap image-responsive类。 有没有办法让这张图片响应卡片,或者我是否需要对图片进行Photoshop