卡片图像因调整大小而移动时的引导 CSS 类

Posted 2023-03-05

技术标签:

【中文标题】卡片图像因调整大小而移动时的引导 CSS 类【英文标题】：Bootstrap CSS class for when card image moves due to resizing 【发布时间】：2018-12-28 08:56:26 【问题描述】：

对不起，我不知道如何用谷歌搜索这个问题。我确定这很简单。我有一张水平卡片，右侧有一张图片。当页面变得足够小时，图像会下降到文本下方。我不是这样设计的，但我不介意。

水平时，无论图像分辨率如何，我都希望图像具有一定的尺寸以及右侧的圆角。

当垂直时，我希望图像填满卡片的整个宽度并在底部有圆角。

问题：标识从右图到下图的过渡的 CSS 元素是什么？

我的特辑

显然，一种解决方案是使用单独的 CSS 指令：一个用于图像位于右侧并设置了高度/宽度和圆角在右侧，另一个用于图像位于底部并设置了高度/宽度自动/100%。

另一种解决方案是将图像保持在右侧并使其宽度缩小，但允许图像高度根据文本量增加。

所以在我的 style.css 中，我会有类似的内容：

.image-round-right 
  width:350px;
  max-height:auto;
  border-radius:0px 5px 5px 0px;


.image-round-bottom 
  width:auto;
  height:auto;
  border-radius:5px 5px 0px 0px;

不确定在这种情况下自动还是 100% 更好。

我会尝试使用this question 中的媒体查询点，但我无法让任何东西生效。

（原始html，在amruth给出答案后发布）

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
  <div class="container-fluid">
    <div class="card flex-md-row mb-4 box-shadow h-md-250 m-3">
      <div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
        <h3>Card Title</h3>
        <p class="card-text mb-auto">
          Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
          Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
          Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
        </p>
      </div>
      <div class="img-round-right">
        <a href="https://www.yahoo.com" title="" target="_blank">
            <img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg
                 class="img-fluid" style="width:auto;height:250px;border-radius:0px 5px 5px 0;">
        </a>
      </div>
    </div>
  </div>
</body>

【问题讨论】：

请分享您当前的 html，或制作一个可用的小提琴。 width: 350px 是强制性的吗？不，350px 是我的测试得出的正确尺寸。应该使用列。谢谢！ 【参考方案1】：

您可以使用 Bootstrap 4 Columns 来实现这一点。

<div class="container mt-5">
  <div class="card">
    <div class="row">
      <div class="col-md-8">
        <div class="card-body">
          <h2>Title</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis maiores voluptate eius laboriosam neque accusamus, hic officia quod dicta. Saepe eum vero, quis dolore animi molestiae id commodi necessitatibus amet.</p>
        </div>
      </div>
      <div class="col-md-4">
          <img src="https://picsum.photos/800" class="img-fluid">
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/djOjbw?editors=1000

【讨论】：

那根本没有响应。 getbootstrap.com/docs/4.0/layout/grid/#grid-options 你确定吗？它似乎做了OP所要求的。在水平中，图像应该在右侧。在垂直中，图像底部应为全角。它应该是四舍五入的，所以添加一个四舍五入的类就可以了。如果我遗漏了什么，请告诉我。是的，对不起，你是对的！不过我也会设置.col-sm-* 类没关系！ :) 为什么.col-sm-* 对于这种特殊情况是必要的？如果在移动设备上，也许完全摆脱图像？ d-sm-none 会做到这一点。仅仅因为 OP 要求代码在“小”屏幕上响应，尽管在帖子中阅读他并没有提到“多么小”，所以实际上任何小于 .col-lg-* 的尺寸都是好【参考方案2】：

您可以使用 boostrap 类进行响应，例如 .col .col-sm-*。据我得到您的问题，您需要在小屏幕上使用完整的图像宽度或在大屏幕上使用固定宽度。

水平案例

你需要应用一定的宽度和border-radius: 0px 5px 5px 0;

垂直案例

对于这种情况，您需要应用width: 100%，因为图像需要根据屏幕调整大小。事实上，它会使用一些高质量的图像拉伸图像，并根据您的要求应用媒体查询。对于底角使用border-radius: 0px 0px 5px 5px;

【讨论】：

感谢您的帖子，自从他第一个到达那里以来，我就给出了答案 amruth，他的答案几乎是正确的。但是，您的回答让我想到了一些事情并想投票赞成。我可以在 CSS 中添加 .col-sm-* （* 被我实际使用的值替换），它会将此边框半径添加到这些列而不覆盖其余的 col-sm-* CSS 元素吗？还是我需要新建一个类 col-sm-*-custom 并继承 col-sm-* 并添加border-radius: 0px 0px 5px 5px？最好将基类继承到新类，因为建议不要更改核心库中的任何内容。

以上是关于卡片图像因调整大小而移动时的引导 CSS 类的主要内容，如果未能解决你的问题，请参考以下文章

动态调整引导卡标题以对齐图像

使用 css 防止或禁用 div 中的自动图像调整大小（使用引导程序）

浏览器调整大小时的CSS转换“触发器”

我们如何防止当我调整窗口大小时，我的图像使用 HTML-CSS 移动？

调整大小时的引导程序错误行为

调整 CSS 大小后图像移动