Creating Responsive Images Using CSS
By giving the width of our images in % instead of giving them the width in pixels, we can make them compatible with different screens.
We usually embed images inside other html elements. If we determine in % how much space a picture will occupy compared to the element it is in, the width of the picture will change according to the width of that element.
img {
width: 100%;
height: auto; }
The above codes are used a lot to get flexible images. The 100% value ensures that the picture takes up as much space as the internal volume of the label. We can set this value as much as we want. By setting Height: auto, the height of the picture is determined according to its current width while keeping the aspect ratio.
But using width: 100% has a risk. If the area where the picture is located is larger than the original width of the picture, the picture will continue to grow and there will be distortions. Therefore, it would be more advantageous to use the max-width property as follows.
img {
max-width: 100%;
height: auto; }
If we are using BootStrap, we can do this in a short way by using the img-responsive class. ( Review our Bootstrap tutorials .)
You can also check our other pages for more information about responsive page design.
Using responsive images, making images responsive, shrinking and expanding the images according to the screen, adapting the images to the screen
EXERCISES
There are no examples related to this subject.
Read 514 times.