Bootstrap - 在不改变高度的情况下改变 <div> 的宽度答案

【问题标题】：Bootstrap - Change width of a <div> without changing heightBootstrap - 在不改变高度的情况下改变 <div> 的宽度
【发布时间】：2021-08-17 03:10:14
【问题描述】：

对不起，我不太喜欢 Bootstrap，但我正在尝试仅更改名为 div class="row border border-secondary mx-auto" 的容器的宽度，当我将属性 w-50 包含到我的类中时，不调整 div 元素的高度和内容的高度图像。图片与发生的情况有关，我只想修剪侧面的边缘并将我的图像基本上包裹到该 div 中，该 div 将具有固定的宽度和高度。

我玩了一会儿，四处搜索，但仍然不知道还能做什么，除了将其更改为 px，但在最小化页面时它不会按比例调整大小。

    <div class="row border border-secondary mx-auto">
            <div class="col-6 offset-3">
                <a href="/profile/{{ $post->user->id }}">
                    <img src="/storage/{{ $post->image }}" class="w-100">
                </a>
            </div>
    </div>

https://i.imgur.com/rSi1FBD.png

【问题讨论】：

嗨，如果你能提供你的 CSS 代码，那会有所帮助。如果您的div 具有固定的高度和宽度，请尝试将图像尺寸设置为 100% 的高度和宽度以适合容器。我的猜测是，根据您提供的代码，当您为图像添加w-100 类时，它还将height 设置为根据图像的宽度自动调整。因此，您也可以尝试限制图像高度。
我认为它基本上只是 Bootstrap CDN - .row { display: flex;弹性包装：换行；边距右：-15px；左边距：-15px； }
我说的是div里面的图片。根据您的代码，它只有宽度类，为它指定一个高度并让我们知道它是否有效。
我找到了答案并贴在下面。

标签： twitter-bootstrap

【解决方案1】：

找到的解决方案 - 基本上删除了 col-6 offset-3 类并为图像添加了一些样式，您通常使用这些样式将图像放入 div 中。

<div class="row border border-secondary mx-auto w-50">
            <div>
                <a href="/profile/{{ $post->user->id }}">
                    <img style="
                       max-width: 100%; 
                       max-height: 100%; 
                       display: block; 
                       height: 600px;"

                    src="/storage/{{ $post->image }}">
                </a>
            </div>
</div>

【讨论】：