如何正确地将图像放置在容器外部，并使其具有自适应性，HTML/CSS

Question

Maket链接：https://www.figma.com/file/hYoPHDHOzzgzEPo4crMmy1/UH15U7CD4WZkbhcW?node-id=2%3A334

项目链接：https://plupiks.github.io/Real-Estate-LandingPage/

我有一个布局，它有一个建筑物的图像。此图像位于容器外部。我可以从容器中取出图像，但我再也无法调整它了。如果我将图像设为width: 100%;height: auto;，则其尺寸将不再与布局中指定的尺寸相对应。

问题是，如何将图像移动到容器外，以便在不改变原始图像尺寸的情况下对其进行调整？

与预处理器SCSS一起工作。

<div class="hero">
<div class="container">
<div class="hero--wrapper">
<div class="hero--blok-left">
<div class="hero--descr">Welcome to&nbsp;Besnik Agency</div>
<h1 class="hero--title">Discover a&nbsp;place you&rsquo;ll love to&nbsp;live.</h1>
<p class="hero--subtitle">
Get the best real estate deals first, before they hit the mass market! hot foreclosure deals with one simple search
</p>
<button class="button hero--button">More About&nbsp;Us</button>
</div>
<div class="hero--block-right">
<div class="hero--img">
<svg width="584" height="620" viewBox="0 0 584 620" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M241.032 610.998L231.713 201.367L58.0327 201.367L60.5743 610.998H241.032Z" fill="#F1F6FF" />
<path d="M302.879 608.881V337.77L512.566 343.89V608.881H302.879Z" fill="#FEFCED" />
<path d="M58.033 201.367L60.5747 610.998H159.276L154.616 201.367H58.033Z" fill="#7398F7" />
<path d="M182.997 159.855H110.983V201.369H182.997V159.855Z" fill="#1F1D42" />
<path d="M110.983 159.855V201.369H159.698C136.315 196.285 129.057 171.575 128.351 159.855H110.983Z" fill="#1F1717" />
<path
d="M152.498 89.1111L144.026 88.2639C141.908 87.4167 141.484 77.6737 149.533 79.7917C155.971 81.4861 154.192 86.7107 152.498 89.1111Z"
fill="#0E173D"
/>
<path d="M152.498 89.112L144.026 88.2648V100.549L152.498 101.397V89.112Z" fill="#0E173D" />
<path d="M144.025 100.548L152.497 101.396L183.845 123.847H110.56L144.025 100.548Z" fill="#1F1D42" />
<path d="M323.636 403.007H316.859V451.298H313.893V456.381H326.602V449.604H323.636V403.007Z" fill="#1B2A63" />
<path d="M512.566 612.269H302.879V473.325L512.566 476.385V612.269Z" fill="#A3BDFF" />
<path d="M448.177 242.458L221.546 235.257L302.879 337.77L520.614 344.124L448.177 242.458Z" fill="#063183" />
<path d="M302.879 337.77L520.614 344.124L316.011 238.258L221.546 235.257L302.879 337.77Z" fill="#7087FB" />
<path
d="M221.546 235.257L302.879 337.77V605.915L152.921 613.117V476.291V337.77L193.164 284.819H184.268L221.546 235.257Z"
fill="#CFDEF3"
/>
<path d="M250.776 297.527H206.297V350.902H250.776V297.527Z" fill="#0C183F" />
<rect x="211.38" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M110.562 123.846H183.846H188.929V125.964H104.631V123.846H110.562Z" stroke="black" />
<path d="M150.804 378.012H303.727H512.99" stroke="black" stroke-width="4" />
<path d="M151.652 486.457H301.186H511.297" stroke="black" stroke-width="5" />
<path d="M151.652 486.457H301.186" stroke="#5267FA" stroke-width="6" />
<rect x="211.38" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M113.525 289.901H91.0741V350.901H115.22L113.525 289.901Z" fill="#0E173D" />
<path d="M113.525 395.381H91.0741V456.381H115.22L113.525 395.381Z" fill="#0C193F" />
<path d="M114.797 267.027H91.9224V220.43C97.3446 205.18 106.325 214.076 110.138 220.43L114.797 267.027Z" fill="#1F1D42" />
<path
d="M352.019 247.118H327.873L306.693 240.763V201.368V199.25L327.873 198.677L353.714 197.979L353.597 201.368L352.019 247.118Z"
fill="#1F326B"
/>
<path d="M352.019 247.118H327.874V201.368V198.677L353.714 197.979L353.597 201.368L352.019 247.118Z" fill="#FEFDE8" />
<path d="M306.693 199.25L327.873 198.677L353.714 197.979L353.597 201.368H327.873H306.693V199.25Z" fill="#112F7F" />
<rect x="180.881" y="125.966" width="1.69444" height="33.8888" fill="#0C1942" />
<rect x="241.032" y="166.632" width="1.69444" height="189.777" transform="rotate(90 241.032 166.632)" fill="#0C1942" />
<rect x="241.032" y="199.673" width="1.69444" height="189.777" transform="rotate(90 241.032 199.673)" fill="#0C1942" />
<path d="M58.0009 231.867H155.855H232.501" stroke="#18265D" stroke-width="4" />
<rect x="241.032" y="186.118" width="1.69444" height="189.777" transform="rotate(90 241.032 186.118)" fill="#081334" />
<rect x="110.56" y="125.966" width="1.69444" height="33.8888" fill="#132355" />
<rect x="128.352" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="131.741" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="136.824" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<path
d="M221.546 235.257L227.259 244.153M302.879 337.77L296.72 330.145M227.259 244.153L453.308 249.66M227.259 244.153L237.524 256.861M237.524 256.861L462.061 261.944M237.524 256.861L248.816 270.84M248.816 270.84L470.813 274.229M248.816 270.84L257.976 282.18M257.976 282.18L479.566 286.514M257.976 282.18L269.004 295.833M269.004 295.833L488.42 298.939M269.004 295.833L278.243 307.27M278.243 307.27L497.739 312.019M278.243 307.27L290.561 322.52M290.561 322.52H505.221M290.561 322.52L296.72 330.145M296.72 330.145L512.918 333.322"
stroke="#A3BDFF"
stroke-width="4"
/>
<rect x="83.4506" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="51.2557" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="239.338" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<path d="M377.436 511.026H363.88V579.651H377.436V511.026Z" fill="#0C183F" />
<path d="M363.88 579.651H377.436V545.339H363.88V579.651Z" fill="#17275F" />
<path d="M489.691 548.304H467.24V580.499H489.691V548.304Z" fill="#17275F" />
<path d="M148.687 79.7914L146.992 1" stroke="black" stroke-width="3" />
<rect x="210.534" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="151.227" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="77.5193" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="145.298" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="158.853" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="162.241" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="152.921" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<path d="M467.24 580.499H489.691V564.402H467.24V580.499Z" fill="#0F1C49" />
<path d="M503.67 556.353H495.198V574.145L503.67 573.721V556.353Z" fill="#FAF2E2" />
<path
d="M200.365 511.449V548.727H204.601V604.643H211.803V546.185H207.143V517.803H248.657V546.185H241.879V604.643H246.115V548.727H254.164V511.449H200.365Z"
fill="#0D0808"
/>
<path d="M241.881 546.186V604.644H211.805V546.186H207.145V517.804H248.659V546.186H241.881Z" fill="#17275F" />
<path d="M584 611.421H0V620H584V611.421Z" fill="#091D39" />
<path
d="M571.873 611.422V576.686M510.026 576.686V611.422M446.485 576.686V611.422M385.909 576.686V611.422M323.214 576.686V611.422M259.249 576.686V611.422M201.638 576.686V611.422M136.826 576.686V611.422M74.132 576.686V611.422M14.4031 576.686V611.422"
stroke="black"
stroke-width="4"
/>
<path
d="M571.873 582C558.6 593.579 527.648 609.789 510.026 582C495.623 590.755 462.751 602.78 446.485 581.769C433.776 590.241 403.869 603.288 385.908 587.699C373.341 593.489 343.209 601.594 323.214 587.699C305.705 591.371 268.399 596.511 259.249 587.699C247.388 591.371 219.26 596.511 201.638 587.699C184.553 591.371 147.67 596.511 136.826 587.699C118.752 593.912 89.8057 602.102 74.1318 587.699C57.0807 591.371 23.3695 597.311 13.5004 588.5"
stroke="black"
stroke-width="3"
/>
<circle cx="571.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="510.026" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="446.484" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="385.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="322.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="259.249" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="201.638" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="136.965" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="73.9653" cy="576.262" r="2.96527" fill="#06162A" />
<circle cx="13.9653" cy="577.965" r="2.96527" fill="#06162A" />
<path d="M56.7639 45.479L69.4722 56.4928L82.1805 45.479" stroke="black" stroke-width="4" />
<path d="M8.47162 38.7016L21.1799 49.7154L33.8882 38.7016" stroke="black" stroke-width="4" />
<path d="M63.5413 16.675L76.2496 27.6889L88.9579 16.675" stroke="black" stroke-width="4" />
<path d="M133.014 20.9098L145.722 31.9236L158.431 20.9098" stroke="black" stroke-width="4" />
<path d="M255.86 390.298H210.11L211.805 458.076H255.86V390.298Z" fill="#0F1F4C" />
<path d="M244.847 401.736H221.125V446.638H244.847V401.736Z" fill="#142553" />
</svg>
</div>
</div>
</div>
</div>
</div>

.hero {
position: relative;
background-color: $blueElis;
font-size: 16px;
}
.hero--wrapper {
display: flex;
column-gap: 4.1875em;
padding-top: 7.125em;
}
.hero--blok-left {
flex: 0 0 50.37%;
margin-top: 5.6875em;
}
.hero--descr {
margin-bottom: 0.444em;
@include SWCL(1.125em, 500, $pigeonBlue, 1.6875);
}
.hero--title {
margin-bottom: 0.46875em;
@include SWCL(4em, 700, $darkBlue, 1.1875);
}
.hero--subtitle {
@include SWCL(1.125em, 400, $marengo, 2);
margin-bottom: 2.222em;
}
.hero--button {
}
.hero--block-right {
display: flex;
align-items: flex-end;
}
.hero--img {
width: 36.5em;
height: auto;
& svg {
max-width: 100%;
height: auto;
}
}
// Adaptive
@media only screen and (max-width: 1024px) {
.header {
font-size: 14px;
}
}

Answer 1

.hero--img {
width: 100%;
height: auto;
max-width: 36.5em;
}

Answer 2

.hero {
position: relative;
background-color: $blueElis;
font-size: 16px;
}
.hero--wrapper {
display: flex;
column-gap: 4.1875em;
padding-top: 7.125em;
}
.hero--blok-left {
flex: 0 0 50.37%;
margin-top: 5.6875em;
}
.hero--descr {
margin-bottom: 0.444em;
@include SWCL(1.125em, 500, $pigeonBlue, 1.6875);
}
.hero--title {
margin-bottom: 0.46875em;
@include SWCL(4em, 700, $darkBlue, 1.1875);
}
.hero--subtitle {
@include SWCL(1.125em, 400, $marengo, 2);
margin-bottom: 2.222em;
}
.hero--button {}
.hero--block-right {
display: flex;
align-items: flex-end;
}
svg {
width: 100%;
height: 100%;
max-width:584px;
max-height:620px;
}

// Adaptive
@media only screen and (max-width: 1024px) {
.header {
font-size: 14px;
}
}

<div class="hero">
<div class="container">
<div class="hero--wrapper">
<div class="hero--blok-left">
<div class="hero--descr">Welcome to&nbsp;Besnik Agency</div>
<h1 class="hero--title">Discover a&nbsp;place you&rsquo;ll love to&nbsp;live.</h1>
<p class="hero--subtitle">
Get the best real estate deals first, before they hit the mass market! hot foreclosure deals with one simple search
</p>
<button class="button hero--button">More About&nbsp;Us</button>
</div>
<div class="hero--block-right">
<div class="heroimg">
<svg width="584" height="620" viewBox="0 0 584 620" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M241.032 610.998L231.713 201.367L58.0327 201.367L60.5743 610.998H241.032Z" fill="#F1F6FF" />
<path d="M302.879 608.881V337.77L512.566 343.89V608.881H302.879Z" fill="#FEFCED" />
<path d="M58.033 201.367L60.5747 610.998H159.276L154.616 201.367H58.033Z" fill="#7398F7" />
<path d="M182.997 159.855H110.983V201.369H182.997V159.855Z" fill="#1F1D42" />
<path d="M110.983 159.855V201.369H159.698C136.315 196.285 129.057 171.575 128.351 159.855H110.983Z" fill="#1F1717" />
<path
d="M152.498 89.1111L144.026 88.2639C141.908 87.4167 141.484 77.6737 149.533 79.7917C155.971 81.4861 154.192 86.7107 152.498 89.1111Z"
fill="#0E173D"
/>
<path d="M152.498 89.112L144.026 88.2648V100.549L152.498 101.397V89.112Z" fill="#0E173D" />
<path d="M144.025 100.548L152.497 101.396L183.845 123.847H110.56L144.025 100.548Z" fill="#1F1D42" />
<path d="M323.636 403.007H316.859V451.298H313.893V456.381H326.602V449.604H323.636V403.007Z" fill="#1B2A63" />
<path d="M512.566 612.269H302.879V473.325L512.566 476.385V612.269Z" fill="#A3BDFF" />
<path d="M448.177 242.458L221.546 235.257L302.879 337.77L520.614 344.124L448.177 242.458Z" fill="#063183" />
<path d="M302.879 337.77L520.614 344.124L316.011 238.258L221.546 235.257L302.879 337.77Z" fill="#7087FB" />
<path
d="M221.546 235.257L302.879 337.77V605.915L152.921 613.117V476.291V337.77L193.164 284.819H184.268L221.546 235.257Z"
fill="#CFDEF3"
/>
<path d="M250.776 297.527H206.297V350.902H250.776V297.527Z" fill="#0C183F" />
<rect x="211.38" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
<rect x="232.56" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M110.562 123.846H183.846H188.929V125.964H104.631V123.846H110.562Z" stroke="black" />
<path d="M150.804 378.012H303.727H512.99" stroke="black" stroke-width="4" />
<path d="M151.652 486.457H301.186H511.297" stroke="black" stroke-width="5" />
<path d="M151.652 486.457H301.186" stroke="#5267FA" stroke-width="6" />
<rect x="211.38" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
<path d="M113.525 289.901H91.0741V350.901H115.22L113.525 289.901Z" fill="#0E173D" />
<path d="M113.525 395.381H91.0741V456.381H115.22L113.525 395.381Z" fill="#0C193F" />
<path d="M114.797 267.027H91.9224V220.43C97.3446 205.18 106.325 214.076 110.138 220.43L114.797 267.027Z" fill="#1F1D42" />
<path
d="M352.019 247.118H327.873L306.693 240.763V201.368V199.25L327.873 198.677L353.714 197.979L353.597 201.368L352.019 247.118Z"
fill="#1F326B"
/>
<path d="M352.019 247.118H327.874V201.368V198.677L353.714 197.979L353.597 201.368L352.019 247.118Z" fill="#FEFDE8" />
<path d="M306.693 199.25L327.873 198.677L353.714 197.979L353.597 201.368H327.873H306.693V199.25Z" fill="#112F7F" />
<rect x="180.881" y="125.966" width="1.69444" height="33.8888" fill="#0C1942" />
<rect x="241.032" y="166.632" width="1.69444" height="189.777" transform="rotate(90 241.032 166.632)" fill="#0C1942" />
<rect x="241.032" y="199.673" width="1.69444" height="189.777" transform="rotate(90 241.032 199.673)" fill="#0C1942" />
<path d="M58.0009 231.867H155.855H232.501" stroke="#18265D" stroke-width="4" />
<rect x="241.032" y="186.118" width="1.69444" height="189.777" transform="rotate(90 241.032 186.118)" fill="#081334" />
<rect x="110.56" y="125.966" width="1.69444" height="33.8888" fill="#132355" />
<rect x="128.352" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="131.741" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<rect x="136.824" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
<path
d="M221.546 235.257L227.259 244.153M302.879 337.77L296.72 330.145M227.259 244.153L453.308 249.66M227.259 244.153L237.524 256.861M237.524 256.861L462.061 261.944M237.524 256.861L248.816 270.84M248.816 270.84L470.813 274.229M248.816 270.84L257.976 282.18M257.976 282.18L479.566 286.514M257.976 282.18L269.004 295.833M269.004 295.833L488.42 298.939M269.004 295.833L278.243 307.27M278.243 307.27L497.739 312.019M278.243 307.27L290.561 322.52M290.561 322.52H505.221M290.561 322.52L296.72 330.145M296.72 330.145L512.918 333.322"
stroke="#A3BDFF"
stroke-width="4"
/>
<rect x="83.4506" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="51.2557" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="239.338" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<path d="M377.436 511.026H363.88V579.651H377.436V511.026Z" fill="#0C183F" />
<path d="M363.88 579.651H377.436V545.339H363.88V579.651Z" fill="#17275F" />
<path d="M489.691 548.304H467.24V580.499H489.691V548.304Z" fill="#17275F" />
<path d="M148.687 79.7914L146.992 1" stroke="black" stroke-width="3" />
<rect x="210.534" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="151.227" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="77.5193" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="145.298" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
<rect x="158.853" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="162.241" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<rect x="152.921" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
<path d="M467.24 580.499H489.691V564.402H467.24V580.499Z" fill="#0F1C49" />
<path d="M503.67 556.353H495.198V574.145L503.67 573.721V556.353Z" fill="#FAF2E2" />
<path
d="M200.365 511.449V548.727H204.601V604.643H211.803V546.185H207.143V517.803H248.657V546.185H241.879V604.643H246.115V548.727H254.164V511.449H200.365Z"
fill="#0D0808"
/>
<path d="M241.881 546.186V604.644H211.805V546.186H207.145V517.804H248.659V546.186H241.881Z" fill="#17275F" />
<path d="M584 611.421H0V620H584V611.421Z" fill="#091D39" />
<path
d="M571.873 611.422V576.686M510.026 576.686V611.422M446.485 576.686V611.422M385.909 576.686V611.422M323.214 576.686V611.422M259.249 576.686V611.422M201.638 576.686V611.422M136.826 576.686V611.422M74.132 576.686V611.422M14.4031 576.686V611.422"
stroke="black"
stroke-width="4"
/>
<path
d="M571.873 582C558.6 593.579 527.648 609.789 510.026 582C495.623 590.755 462.751 602.78 446.485 581.769C433.776 590.241 403.869 603.288 385.908 587.699C373.341 593.489 343.209 601.594 323.214 587.699C305.705 591.371 268.399 596.511 259.249 587.699C247.388 591.371 219.26 596.511 201.638 587.699C184.553 591.371 147.67 596.511 136.826 587.699C118.752 593.912 89.8057 602.102 74.1318 587.699C57.0807 591.371 23.3695 597.311 13.5004 588.5"
stroke="black"
stroke-width="3"
/>
<circle cx="571.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="510.026" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="446.484" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="385.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="322.965" cy="574.965" r="2.96527" fill="#06162A" />
<circle cx="259.249" cy="575.416" r="2.96527" fill="#06162A" />
<circle cx="201.638" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="136.965" cy="574.568" r="2.96527" fill="#06162A" />
<circle cx="73.9653" cy="576.262" r="2.96527" fill="#06162A" />
<circle cx="13.9653" cy="577.965" r="2.96527" fill="#06162A" />
<path d="M56.7639 45.479L69.4722 56.4928L82.1805 45.479" stroke="black" stroke-width="4" />
<path d="M8.47162 38.7016L21.1799 49.7154L33.8882 38.7016" stroke="black" stroke-width="4" />
<path d="M63.5413 16.675L76.2496 27.6889L88.9579 16.675" stroke="black" stroke-width="4" />
<path d="M133.014 20.9098L145.722 31.9236L158.431 20.9098" stroke="black" stroke-width="4" />
<path d="M255.86 390.298H210.11L211.805 458.076H255.86V390.298Z" fill="#0F1F4C" />
<path d="M244.847 401.736H221.125V446.638H244.847V401.736Z" fill="#142553" />
</svg>
</div>
</div>
</div>
</div>
</div>

就像上面的一样？(运行片段(

理念：

• 使用百分比(100%(作为svg的宽度、高度

Answer 3

作为一种简单的解决方法，您可以使用相对单位(如%、vw、vmin或vmax(来设置背景大小，如下所示：

/* small devices */
.hero{
background-size: 50%; 
}

/* large devices */
@media (min-width:1024px){
.hero{
background-size: 36.5em 38.75em;
}
}

原始背景大小将应用于大于1024px的视口
您当然需要调整这些值以获得所需的结果。