LaVOZs

The World’s Largest Online Community for Developers

'; html - Image not rescaling to fit parent container - LavOzs.Com

Im trying to make a banner for a website and I have an image that I want to rescale to always fit the parent container. (I don't want to preserve aspect ratio).

This is what I would like the image to look like. enter image description here

But Im getting this result when I scale it up.

enter image description here

The code that currently have looks as following:

html:

    <div class="elephant-banner">
    <img class="lines-behind-elephant"
        src="elephant-lines-behind-logo.svg" />
</div>

css:

.elephant-banner {
  position: relative;
  background: rgb(36, 13, 82);

  background: linear-gradient(
    0deg,
    rgba(36, 13, 82, 1) 0%,
    rgba(46, 87, 136, 1) 100%
  );
  border-bottom-width: 0.3rem;
  border-style: solid;
  border-color: rgb(92, 174, 255);

  overflow: hidden;
  width: 100%;
  max-height: 30rem;
}

.lines-behind-elephant {
  height: auto;
  width: 100%;
  mix-blend-mode: overlay;
}

I only want it to scale in the x axis.

Any help would be greatly appreciated! Thank you for your time.

The svg code is this:

<svg width="100%" height="100%" viewBox="0 0 5000 1669" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect x="0" y="0" width="5000" height="1666.21" style="fill:none;"/><clipPath id="_clip1"><rect x="0" y="0" width="5000" height="1666.21"/></clipPath><g clip-path="url(#_clip1)"><path d="M3795.99,2166.81l-763.889,-990.005l737.23,1010.01c5.521,7.357 15.977,8.847 23.334,3.326c7.357,-5.522 8.847,-15.978 3.325,-23.335Z" style="fill:#fff;"/><path d="M1479.9,1861.45l453.519,-662.814l-472.246,649.604c-3.645,5.168 -2.409,12.323 2.759,15.968c5.168,3.645 12.323,2.409 15.968,-2.758Z" style="fill:#fff;"/><path d="M801.356,1810.86l830.026,-690.651l-844.496,672.88c-4.904,3.993 -5.643,11.217 -1.65,16.121c3.993,4.904 11.216,5.643 16.12,1.65Z" style="fill:#fff;"/><path d="M-210.713,1720.61l1747.59,-837.934l-1761.74,807.755c-8.329,3.905 -11.919,13.838 -8.014,22.166c3.906,8.328 13.838,11.919 22.166,8.013Z" style="fill:#fff;"/><path d="M-492.05,1122.88l1914.44,-446.648l-1921.74,414.124c-8.975,2.014 -14.627,10.935 -12.613,19.911c2.014,8.975 10.936,14.627 19.911,12.613Z" style="fill:#fff;"/><path d="M-435.216,489.968l1809.06,-33.614l-1809.37,0.282c-9.198,0.086 -16.596,7.624 -16.51,16.822c0.087,9.198 7.624,16.596 16.822,16.51Z" style="fill:#fff;"/><path d="M-692.991,-163.252l2101.15,393.636l-2094.76,-426.351c-9.028,-1.764 -17.79,4.133 -19.554,13.161c-1.765,9.028 4.133,17.789 13.16,19.554Z" style="fill:#fff;"/><path d="M4533.57,2004.77l-1174.52,-885.966l1154.15,912.348c7.28,5.622 17.756,4.276 23.378,-3.004c5.622,-7.281 4.276,-17.756 -3.004,-23.378Z" style="fill:#fff;"/><path d="M5279.77,1651.63l-1820.36,-777.142l1807.02,807.687c8.43,3.683 18.263,-0.171 21.946,-8.6c3.683,-8.429 -0.171,-18.262 -8.6,-21.945Z" style="fill:#fff;"/><path d="M5449.37,1011.62l-1908.56,-360.826l1902.09,393.524c9.024,1.787 17.8,-4.089 19.586,-13.113c1.786,-9.023 -4.089,-17.799 -13.113,-19.585Z" style="fill:#fff;"/><path d="M5437.75,390.626l-1839.79,35.421l1840.13,-2.089c9.198,-0.094 16.59,-7.638 16.496,-16.836c-0.093,-9.198 -7.637,-16.59 -16.835,-16.496Z" style="fill:#fff;"/><path d="M5026.76,-145.521l-1498.02,347.82l1505.2,-315.271c8.982,-1.983 14.664,-10.885 12.681,-19.868c-1.983,-8.982 -10.886,-14.664 -19.868,-12.681Z" style="fill:#fff;"/></g></svg>

Related
Vertically align text next to an image?
When to use IMG vs. CSS background-image?
How to lazy load images in ListView in Android
How do I give text or an image a transparent background using CSS?
Is there a CSS parent selector?
RegEx match open tags except XHTML self-contained tags
How do I auto-resize an image to fit a 'div' container?
How to vertically align an image inside a div
Changing image size in Markdown
Font scaling based on width of container