依次响应地调整图像和背景图像的大小

我有两个图像，一个是JPG，一个是SVG，它们必须被覆盖，JPG在SVG之上。它们都必须随着视口尺寸的变化而精确地调整大小，而不仅仅是在特定的断点，而是不断地调整。JPG是图形(<figure><img/></figure>)标记集中的图像，SVG是CSSbackground: 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图片，但设计师主要对这个解决方案感兴趣。

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

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>

你可以用两种不同的方式来尝试:

将两张图片合并成一张独特的图片，再次询问设计师，这样可以节省你的时间。SVG和JPG的行为不同
。不是一个选项，将。jpg图像转换为。png并选择相同大小的svg，图像本身将是相同的，但透明度会给你相同的大小。(这里重要的是宽高比)

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

使用设计师提供的相同图像的方向将导致不必要的额外代码，另外，即使保持相同的宽高比，你也应该注意在缩放期间的定位，这是另一个麻烦，它将给你带来特定设备的问题，如iPadPro不完全针对多个CSS框架。

让我们从稍微不同的角度来看这个问题。我们有一张图片，我们需要让它成为一个响应框架。但是这个框架不一定是一张图片。

我们制作一组图像，而不是一个框架，使用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>

相关内容

最新更新

热门标签：