html - 用 img 替换 bootstrap-5 svg 占位符

Question

我正在尝试从 Bootstrap 5 轮播主页复制样式。除了“featurette-image”类之外的所有内容都做得很好，并将占位符 SVG 替换为以相同方式起作用的 IMG。现在，我发现以选定格式（70vh...固定 500px）复制很容易，但是当我更改视图屏幕或看起来像 SVG 占位符时，它们都没有反应好。

原始代码如下。我根本不知道如何使图像复制 500x500 矩形 SVG 占位符，这让我很烦！

<div class="row featurette">
      <div class="col-md-7">
        <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
      </div>
      <div class="col-md-5">
       
        <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" id="test" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text>
      </svg>

      </div>
    </div>

放置一个 img 并将其分配给“featurette-image”类总是被“img-fluid”类覆盖，并以一种奇怪的方式将图像弄皱。

<div class="row featurette">
      <div class="col-md-7 order-md-2">
        <h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
      </div>
      <div class="col-md-5 order-md-1">
        <img src="https://cdn.pixabay.com/photo/2012/11/28/13/53/osprey-67786_1280.jpg" class="feaurette-image img-fluid mx-auto">

      </div>
    </div>

任何和所有的帮助将不胜感激！

标签： htmlcsstwitter-bootstrapbootstrap-5

Answer 1

你从来没有解释过是什么featurette-image。

使用img-fluid将始终使其充满父级的宽度。如果featurette-image设置特定高度，图像将失去其纵横比。

https://codeply.com/p/JgrBBiAmCV