Question

很抱歉，但是我不知道如何用Google搜索这个问题。我敢肯定这很简单。我有一张水平卡，右侧有图像。当页面足够小时，图像会降到文本下方。我不是这样设计的，但我不介意。

水平放置时，无论图像分辨率和右侧圆角如何，我都希望图像具有一定的大小。

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

问题：什么是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>

Answer 1

您可以使用Bootstrap 4列来实现这一目标。

<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

Answer 2

您可以使用boostrap类进行响应，例如.col .col-sm-*。就我所知，您需要在小屏幕上显示完整的图像宽度，或者在大屏幕上显示固定宽度。

横向案例

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

垂直案例

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

Bootstrap CSS类，用于在卡片图像由于调整大小而移动时

2 个答案: