未根据Bootstrap列大小调整图像大小

vuktfyat  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(7)|浏览(204)

我的目标是每行显示4个图像。代码如下:

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>                                                                                    
</div>

我也希望看到基于Bootstrap的列样式调整大小的图像,但我得到的是重叠的完整图像。
有什么线索吗?

omqzjyyz

omqzjyyz1#

尝试将以下内容添加到样式表中:

img {
    width: 100%;
}

**更新:**作为一种替代方案(正如@JasonAller在回答中的评论所指出的),你可以将class="img-responsive"添加到每个img元素中。这会将max-width: 100%;height: auto;应用到图像中,这样它就可以很好地缩放到父元素中。更多信息请参见Bootstrap文档。

bootstrap v4更新

Bootstrap v4的类名为img-fluid
Bootstrap v4 docs

uklbhaso

uklbhaso2#

对于Bootstrap 4,您必须使用use class=“img-fluid”,class=“img-responsive”将在3.x中工作。

0h4hbjxa

0h4hbjxa3#

有时,在动态内容上,当您无法控制用户输入的内容时,class=“img-responsive”将无法工作。100%'对每个图像也是棘手的。所以我使用:

img {max-width: 100%;}
xbp102n0

xbp102n04#

请注意,引导数据行也会有填补;这可能是意料之外的。
以下内容:

div class="col-sm-6" style="padding:0"

对我有用。

kkbh8khc

kkbh8khc5#

如果需要,可以在html元素中使用width标记,例如:

<img width="60%" src="...">

我发现它更有用,因为你可以玩百分比,直到你有想要的大小。

bprjcwpo

bprjcwpo6#

解决这个问题的方法是使用<picture><source>标记。只要确保为不同的屏幕准备了不同大小的图像。
https://www.w3schools.com/tags/att_source_media.asp

7z5jn7bk

7z5jn7bk7#

Bootstrap 5的一般解。我在答案的最后添加了OP问题的一个特殊解。
在某些情况下,调整大小似乎不是一件容易的事情。我还没有在BS 5中找到任何使用Bootstrap类来调整特定图像大小的内置实现。
我发现的最佳解决方案是像处理其他HTML元素(spandiv元素)一样处理图像。

一般解决方案

使用此代码段

<img
    src="~/Content/images/YourImage.jpg"
    class="img-fluid mx-auto mx-lg-0 h-100 col-8 col-sm-6 col-md-4 col-lg-1 my-auto"
>

注意:这只是一个一般性的例子,根据你的需要进行调整。

解释(或多或少会发生这种情况)

  • 基本设置(用于引导响应映像):
  • img-fluid:映像已响应。这将应用max-width:100%;以及高度:auto;添加到图像,使其与父宽度一起缩放。
  • mx-auto:在手机视图中,将图像在水平轴上居中。左右边距设置为自动
  • mx-lg-0:当达到lg断点时,两边的边距设置为0。
  • 使用列(根据需要调整大小):
  • h-100:图像高度设置为相对于父级的100%。这应保持正确的纵横比。
  • col-8:在最小屏幕尺寸下,图像将占用8列。
  • col-sm-6:在小屏幕断点之后(参见以下部分的链接),图像将占据6列。
  • col-md-4:在中等尺寸屏幕上,4列。
  • col-lg-1:在大尺寸屏幕上,1列。
  • my-auto:用于垂直居中(可选)。

记住,你要根据自己的意愿和喜好来设置纵队。
结果

此问题的解决方案

代码的主要问题是缺少类。请记住:Bootstrap主要是关于正确使用类。如果你在放入你自己的CSS代码之前正确使用了内置类,你应该三思而后行。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex gap-2">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
</div>

对于不同屏幕尺寸下的响应,请参阅上面的通用解决方案。

链接

相关问题