响应式调整图像和背景图像的大小答案

【问题标题】：Responsively resizing image and background image in tandem响应式调整图像和背景图像的大小
【发布时间】：2021-11-02 02:20:37
【问题描述】：

我有two images，一个 JPG 和一个 SVG，必须重叠，JPG 位于 SVG 之上。它们都必须随着视口尺寸的变化而完全按比例调整大小，不仅在特定断点处，而且在不断变化。 JPG 是图形 (<figure><img/></figure>) 标记集中的图像，而 SVG 是 CSS background: url(/url/to/image.svg)。背景图像看起来像<figure> 图像周围的相框，因此要使它们看起来像是一个单元，在视口调整到任何尺寸时，它们每个都保持相同的纵横比至关重要。

我不知道如何在不同步或不同步且<figure> 图像与背景重叠或背景对于<figure> 来说太大的情况下实现这一点。这是我尝试过的。

<figure class="outline-img">

    <img 
        width="1024" height="682" 
        src="//localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1.jpeg" 
        class="attachment-large size-large" 
        alt="" 
        loading="lazy" 
        data-src="//localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1.jpeg" 
        data-srcset="//localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1.jpeg 1024w, //localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1-300x200.jpeg 300w, //localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1-768x512.jpeg 768w" 
        data-sizes="(min-width: 960px) 75vw, 100vw"
        srcset="//localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1.jpeg 1024w, //localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1-300x200.jpeg 300w, //localhost:8181/wp-content/uploads/2021/08/istockphoto-1034140728-1024x1024-1-768x512.jpeg 768w" 
        sizes="(min-width: 960px) 75vw, 100vw">
            
</figure>

这是当前构成的背景 CSS：

.outline-img {
    padding: 9.4%;
    width: 118%!important;
    background: url(/wp-content/uploads/2021/09/frame.svg);
    background-repeat: space;
    background-position: 50%;
}

奇怪的填充和宽度值是我目前尝试将图像“保持”在 SVG 图像尺寸内的方式。任何小于该值的填充都会剪裁 SVG 图像的外边缘。任何小于该值的宽度都会使图像不适合 SVG 的内边缘。当我调整浏览器的大小时，框架图像不会“粘”到 SVG 的内部尺寸。

我很想知道是否有更简单的方法可以做到这一点。我尝试建议将这两个都制作成一张 JPG 图片，但设计师主要对这个解决方案感兴趣。

【问题讨论】：

最简单的方法是将图像放入 svg 并使用 svg 内联而不是 css 背景。您能否编辑您的问题并为 thr 框架添加 svg？
据我了解，您有一个图像和一个 SVG，它必须围绕图像作为某种边界。对于outline-img，请尝试将填充设置为精确的测量值（em、px）而不是 %，否则它将根据父级大小不断变化。至于图像，给它一个max-width: 100% 以防止它溢出，height: auto 以保持纵横比。不确定您的 SVG 是什么样子，但使用随机图像进行了测试，这似乎对我有用。您是否需要 SVG 根据图像大小更改大小？在那种情况下，这种方法是行不通的。
您可以尝试的另一种方法，与以前一样，尝试为outline-img 提供精确的填充，将其设置为position: relative 并将SVG 添加为::after 元素。 position: absolute; top: 0; bottom: 0; left: 0; right: 0; 使其覆盖整个div。这将在图像的顶部，但如果你 z-index: -1 它，它应该在它的下方。如果您可以发布具有所需效果的屏幕截图以及它现在的样子，这将有助于更好地可视化正在发生的事情。
+1 在 SVG 中做所有事情。然后构建了一个W3C标准的Web Component，所以用户只需要做<framed-img ... attributes >
@Danny'365CSI'Engelman 我不知道 Web Components 是什么，所以我查了一下。我认为这不适合这个项目，因为它需要成为所有浏览器都接受的方法。 blog.logrocket.com/what-happened-to-web-components

标签： css wordpress image svg background

【解决方案1】：

您可以尝试两种不同的方式：

将 2 张图片合并为一张独特的图片，再次询问设计师，这样可以节省您的时间。 svg 和 jpg 的行为不同
如果 1. 不是一个选项，请将 .jpg 图像转换为 .png 并选择相同大小的 svg，图像本身将是相同的，但透明度将为您提供相同的大小。（这里重要的其实是长宽比）

在这两种情况下，添加属性object-fit:contain 以在缩放期间保持纵横比并将宽度和高度设置为自动

朝着使用设计师提供的相同图像的方向发展将导致不必要的额外代码，此外，即使保持相同的纵横比，您也应该注意缩放期间的定位，这将是另一个麻烦特定设备（如 iPadPro）的问题并未完全针对多个 CSS 框架。

【讨论】：

我可能必须按照您的建议执行 #1，但正如我在上面对 enxaneta 所指出的那样，网站所有者需要能够只上传一个普通的 .jpg，而不需要对要添加的 jpg 进行任何特殊处理它周围的背景（他们不知道或不想在每次上传照片时使用 Photoshop）。 #2 也没有用。 :(

【解决方案2】：

让我们以不同的方式看待这个问题。我们有一张图片，我们需要让它成为一个响应式框架。但这一帧不必是一张图片。

我们制作一组图像，而不是一个框架，使用 css，我们将在图像周围组装一个响应式框架。

你需要做什么：

将框架切成 4 个角。

我们还为上/下和左/右边缘制作了 4 个元素。

接下来，我们制作一张这样的表格 https://jsfiddle.net/n5zfue27/1/

此方案支持任何浏览器，包括 IE6。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      html,
      body {
        height: 100%;
        margin: 0;
      }

      table {
        table-layout: fixed;

        border-collapse: collapse;
        padding: 0;
        margin: 0;
      }

      table td {
        padding: 0;
        border: 1px solid black;
      }

      .left-top,
      .left-down,
      .right-top,
      .right-down,
      .left,
      .right {
        height: 30px;
        width: 30px;
        background: red;
      }

      .left,
      .right {
        background-color: #e5e5f7;
        opacity: 0.8;
        background-image: linear-gradient(to right, #444cf7, #444cf7 5px, #e5e5f7 5px, #e5e5f7);
        background-size: 10px 100%;
        height: 100%;
      }

      .center-top,
      .center-down {
        background-color: #e5e5f7;
        opacity: 0.8;
        background-image: linear-gradient(0deg, #e5e5f7 50%, #444cf7 50%);
        background-size: 10px 10px;

      }

    </style>
  </head>

  <body>
    <table>
      <tr>
        <td class="left-top">

        </td>
        <td class="center-top">

        </td>
        <td class="right-top">

        </td>
      </tr>
      <tr>
        <td class="left">

        </td>
        <td class="center"><img style="width: 100%; display: block;" src="https://dunham-bush.com/wp-content/uploads/2020/01/Heron-Tower-London-900x556.jpg"></td>
        <td class="right">

        </td>
      </tr>
      <tr>
        <td class="left-down">

        </td>
        <td class="center-down">

        </td>
        <td class="right-down">

        </td>
      </tr>
    </table>
  </body>

</html>

【讨论】：

【解决方案3】：

我假设图像的尺寸保持不变。您可以尝试以下方法。

figure {
  background: url(https://cdn.pixabay.com/photo/2017/11/10/16/59/frame-2936877_960_720.png) no-repeat;
  background-size: 100% 100%;
  padding: 5%; /*adjust for your need*/
  width: 30%; /*adjust for your need*/
}
  
img {
  display: block;
  width: 100%;
  height: auto;
}

<figure class="outline-img">
    <img width="1000" height="600" 
        src="https://dummyimage.com/600x1000/000/fff"/>
</figure>

【讨论】：

非常感谢。这是我需要的代码，但我一直在逃避。