Diverse
Info on how to stretch a image to fill a <div>
https://stackoverflow.com/questions/16501668/stretch-image-to-fit-100-of-div-height-and-width
https://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat
https://www.sitepoint.com/community/t/how-to-make-an-image-fit-in-a-responsive-div/259263/13
https://forum.webflow.com/t/maintain-image-aspect-ratio-when-filling-a-div/48790
http://jsfiddle.net/Mottie/pu2p1u9g/
https://www.quora.com/How-can-I-fix-an-image-in-a-div-without-stretching-it-if-the-image-size-is-greater-than-the-div-size-or-less-than-the-div-size
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size
https://www.w3schools.com/cssref/css3_pr_background-size.asp
CSS - Background-size
CSS Syntax
background-size: auto|length|cover|contain|initial|inherit;
Property Values
| Value | Description |
|---|---|
| auto | Default value. The background image is displayed in its original size |
| length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units |
| percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" |
| cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges |
| contain | Resize the background image to make sure the image is fully visible |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Tip: You can position the background image using the CSS background-position property.
CSS background-position
CSS background-position Property
CSS background-position
CSS Syntax
background-position: value;
Property Values
| Value | Description |
|---|---|
|
left top left center left bottom right top right center right bottom center top center center center bottom |
If you only specify one keyword, the other value will be "center" |
| x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0% |
| xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Property Values 2
left
right
center
top
bottom