如何使div的svg背景圖像動態縮放並保持在div的中心

Question

我目前正在從事以下網站設計：

我有兩個部分（頂部和底部），都分為兩個部分（圖標和內容）。 我嘗試在圖標部分使用居中的svg圖像，盡管每當查看區域/瀏覽器窗口的大小更改時，圖像都會被截斷。 如何防止這種情況發生？

這是我目前正在使用的：

示例-js小提琴鏈接

SVG圖片-SVG圖片

HTML-

<div id="main1">
   <div id="icon1">&#160;</div>​ 
   <div id="links1">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
   </div>
</div>
<br/>
<div id="main2">
   <div id="icon2">​​​</div>
   <div id="links2">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
   </div>
</div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
   <div class="ms-rtestate-notify  ms-rtestate-read a64b9522-0ca6-4ff7-a9fc-67a7a27d3071" id="div_a64b9522-0ca6-4ff7-a9fc-67a7a27d3071" unselectable="on">
   </div>
   <div id="vid_a64b9522-0ca6-4ff7-a9fc-67a7a27d3071" unselectable="on" style="display: none;">
   </div>
</div>

CSS-

<style>
#main1 > div { min-height: 100px; }
#main1 {
    /* overflow to handle inner floating block */
    overflow: hidden;
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px; 
    margin-right: 5%;
    margin-left: 5%;
}

#icon1 {
    float: left;
    width: 29%;
    border-right:thin solid red;
}

#links1 {
    float: right;
    width: 70%;
}
#main2 > div { min-height: 100px; }
#main2 {
    /* overflow to handle inner floating block */
    overflow: hidden;
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px; 
    margin-right: 5%;
    margin-left: 5%;
}

#icon2 {
    float: left;
    width: 29%;
    border-right:thin solid red;
    /* background: url('/support/Shared%20Documents/065__calendar.svg') no-repeat center; */
    background-image: url('/support/Shared%20Documents/065__calendar_crop.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

#links2 {
    float: right;
    width: 70%;
}
</style>

Answer 1

使用background-size: contain而不是cover並使用background-position: center center使其居中。

DEMO

查看W3schools的文檔 ：

覆蓋

縮放背景圖像以使其盡可能大，以使背景區域完全被背景圖像覆蓋。 在背景定位區域內可能看不到背景圖像的某些部分

包含

將圖像縮放到最大尺寸，以使其寬度和高度都適合內容區域