Image Size Responsive

How Can I Do Image Size Responsive?

In order for images to be responsive, you can choose the following methods:

Using width property

You can first use the width property. When you choose this, you will prefer the height to be automatically adjusted based on the device used or other responsive requirements. In this way, the visual will be scaled to be responsive and presented to the user in this way. You can use the following code for this

img {
  width: 100%;
  height: auto;
}

We would like to tell you that when you use the code above, the image will not remain at its original size. That is, it may become smaller or larger. In this case, using max-width is seen by many as a “better solution”.

Using max-width property

Setting the value of max-width: 100px percent writes new rules for generating a responsive display. If the image to be rescaled to be responsive will be much larger than the original, this code prevents this. But the image still has the ability to be smaller. Use the code below for this:

img {
  max-width: 100%;
  height: auto;
}

Srcset to improve loading time

If you want to improve the loading time of the image on your web page, you can make a change to the page width in order to increase the speed on mobile. Srcset, which is an extremely good option for use in modern search engines, do exactly that. Combine the srcset command with the <picture> tag. Here is an example:

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg">
</picture>

You can easily load smaller images on your web page for your mobile visitors by using scrcet. 

Object-fit both for images and videos

It is a very popular code that allows any visual or video to easily fit into its container. When you use this, you can choose to preserve the aspect ratio, or you can stretch and resize as many images as you like.

Here is an example for object-fit code:

.myImg {
  object-fit: cover;
  width: 320px;
  height: 180px;
}

object-fit is an extremely practical code, but it has a minor drawback. This code may not work in Internet Explorer and older versions of Safari.