Content Images

<img src="images/sky.jpg">

Object Fit

• Used to specify how an <img> or <video> should be resized to fit its container.
• Possible values
  • fill - This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
  • contain - The image keeps its aspect ratio, but is resized to fit within the given dimension
  • cover - The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit

img {
    border: 2px solid blue;
    width: 300px;
    height: 600px;
    object-fit: cover;
}

Inside Container (div)

.box {
	border: 2px solid blue;
	width: 300px;
	height: 600px;
}
.box img {
	width: 100%;
	height: 100%;
	object-fit: fill; 
}