使用 CSS background-image 的响应式图像

问题描述

在使用 height 设置图像时，我试图让这些图像具有相同的 width 但自动 background-image。

第一个例子展示了我想要达到的效果。内联且高度相同。

第二个例子是在 div 上使用 background-image 尝试相同的效果，但它们移动到一个新行，因为它们是块元素。

第三个示例与第二个示例相同，但使用跨度，因为这更类似于我的现实世界问题。这会折叠我假设的宽度，因为没有实际内容。

感谢大家的帮助

      .img-1 {
        content: url("https://via.placeholder.com/180x800");
      }
      .img-2 {
        content: url("https://via.placeholder.com/120x50");
      }
      .img {
        height: 200px;
      }

      .bg-img-span {
        display: inline-block;
        height: 100px;
        background-size: 200px 200px;
        border: solid 2px blueviolet;
      }

      .bg-image-div {
        display: block;
        height: 100px;
        background-size: 200px 200px;
        border: solid 2px blueviolet;
      }

      .bg-img-1 {
        background-image: url("https://via.placeholder.com/180x800");
      }
      .bg-img-2 {
        background-image: url("https://via.placeholder.com/120x50");
      }

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8" />
    <Meta name="viewport" content="width=device-width" />
    <title>test</title>
    <style>

    </style>
  </head>
  <body>
    <h2>This is what i want - the same height and auto width</h2>
    <div>
      <img class="img img-1" alt="" />
      <img class="img img-2" alt="" />
    </div>

    <hr />

    <h2>Want these the same height and side by side</h2>
    <div>
      <div class="bg-image-div bg-img-1"></div>
      <div class="bg-image-div bg-img-2"></div>
    </div>

    <hr />
    <h2>Same as above but with spans</h2>
    <div>
      <span class="bg-img-span bg-img-1"></span>
      <span class="bg-img-span bg-img-2"></span>
    </div>
  </body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html

使用 CSS background-image 的响应式图像

问题描述

解决方法

相关问答