响应式地串联调整图像和背景图像的大小

Question

我有 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 图片，但设计师主要对这个解决方案感兴趣。

Answer 1

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

将2张图片合并成一张独特的图片，再问设计师，这样可以节省你的时间。 svg 和 jpg 表现不同
如果 1. 不是一个选项，将 .jpg 图像转换为 .png 并选择相同大小的 svg，图像本身将是相同的，但透明度会给你相同的尺寸。（这里重要的其实是纵横比）

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

朝着使用设计师提供的相同图像的方向发展将导致不必要的额外代码，此外，即使保持相同的纵横比，您也应该在缩放时注意定位，这是另一个麻烦像 iPadPro 这样的特定设备没有被多个 CSS 框架准确定位，这会给你带来问题。

Answer 2

让我们换个角度看这个问题。我们有一张图片，我们需要使它成为响应式框架。不过这一帧不一定是一张图。

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

您需要做的事情：

将框架切成 4 个角块。

我们还为顶部/底部和左侧/右侧边缘制作了 4 个元素。

接下来，我们做一个table这样的 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>

Answer 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>

响应式地串联调整图像和背景图像的大小

Responsively resizing image and background image in tandem

css

wordpress

svg

background

image