我有兩張圖片，一張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"/span>
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">/span>
</figure>/span>
這是目前構成背景的CSS：
.outline-img {
padding: 9.4%;
width: 118%！ important。
background: url（/wp-content/uploads/2021/09/frame.svg）。
background-repeat: space;
background-position: 50%;
這些奇怪的padding和width值是我目前試圖在SVG影像的尺寸范圍內 "保持 "影像的方法。任何小于這個值的padding都會夾住SVG影像的外邊緣。任何小于該值的寬度都會使影像不適合SVG的內邊緣。而當我調整瀏覽器的大小時，被框住的影像就不會 "粘 "在SVG的內部尺寸上。
我很想知道是否有一個更簡單的方法來做到這一點。我試著建議將這兩張圖片合并成一張JPG圖片，但設計師主要對這個解決方案感興趣。
uj5u.com熱心網友回復：
我假設圖片的尺寸保持不變。
。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%; /*根據您的需要調整*/。
width: 30%; /*根據需要調整*/ width: 30%; /*根據需要調整
}
img {
display: block;
width: 100%;
height: auto;
}< figure class="outline-img"/span>>
<img width="1000" height="600"src="https://dummyimage.com/600x1000/000/fff"/span>/>
</figure>/span>uj5u.com熱心網友回復：
你可以用2種不同的方式嘗試：
合并
將2張圖片合并為一張獨特的圖片，再次詢問設計師，這將節省你的時間。svg和jpg的行為是不同的
如果1.不是一個選項，將.jpg影像轉換為.png，并選擇相同大小的svg，影像本身將是相同的，但透明度將給你相同的大小。(這里重要的是長寬比)
。在這兩種情況下，添加屬性object-fit:contain以在縮放時保持長寬比，并將寬度和高度設定為自動
。使用設計者提供的相同影像的方向將導致沒有必要的額外代碼，此外，即使保持相同的長寬比，你也應該在縮放程序中注意定位，這是另一個麻煩，它將給你帶來問題，像iPadPro這樣的特殊設備并不完全針對周圍的多個CSS框架。
uj5u.com熱心網友回復：
讓我們以一種不同的方式來看待這個問題。 我們有一張圖片，我們需要讓它成為一個回應式的框架。 但是這個框架不一定是一個圖片。
我們不做一個框架，而是做一組圖片，使用css，我們將在圖片周圍組裝一個回應式的框架。
你需要做的是：
將框架切成4個角。
我們還將制作4個元素。
我們也為頂/底和左/右邊緣制作4個元素。
接下來，我們做一個這樣的表格 https://jsfiddle.net/n5zfue27/1/
這個解決方案支持任何瀏覽器，包括IE6。
<! DOCTYPE HTML PUBLIC "-/W3C/TD 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"/span>>
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: 紅色。
}
.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>/span>
<td class="center-top">
</td>/span>
<td class="right-top">
</td>/span>
</tr>/span>
<tr>/span>
<td class="left">
</td>/span>
<td class="center"/span>> <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>/span>
</tr>/span>
<tr>/span>
<td class="left-down">
</td>/span>
<td class=" center-down">
</td>/span>
<td class="right-down">/span>
</td>/span>
</tr>/span>
</table>/span>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/320134.html
標籤：
上一篇：將svgs定位到一個盒子里