xxxxxxxxxx
<style>
.responsive-image {
max-width: 100%;
height: auto;
}
</style>
<img src="path_to_image.jpg" class="responsive-image" alt="Responsive Image">
xxxxxxxxxx
.responsive_img {
width: 100%;
height: auto;
object-fit: cover;
/* Prevent the image from stretching. So it crops the image to prevent from awkward stretching */
}
xxxxxxxxxx
/* If you want the image to scale both up and down on responsiveness,
set the CSS width property to 100% and height to auto: */
.responsive {
width: 100%;
height: auto;
}
/*If you want an image to scale down if it has to,
but never scale up to be larger than its original size,
use max-width: 100%:*/
.responsive {
max-width: 100%;
height: auto;
}
/*If you want to restrict a responsive image to a maximum size,
use the max-width property, with a pixel value of your choice:*/
.responsive {
width: 100%;
max-width: 400px;
height: auto;
}
xxxxxxxxxx
<style>
.responsive-image {
max-width: 100%;
height: auto;
}
</style>
<img class="responsive-image" src="path/to/your/image.jpg" alt="Responsive Image">
xxxxxxxxxx
Responsive images: (How to make images responsive)
img{
// what this will do is give your image flexibility within the space.
width:100%;
// max-width is optional(if you dont want your img to get bigger
// than a certain width).
max-width:800px;
}
** problem with this approach is that you have one image that loads regardless
of what device you are using regardless of the speed of the connection.
a mobile phone device for example. so one file size for different sizes.
** This works if you are working with small images that are already small
file size, so you dont have to use responsive image code like 'srcset'
as that code takes a lot of time and effort to put together. and frankly
srcset and different versions of images is not needed if images are small
and you are getting good web performance. then this is right solution.
Other techniques:
** Art Direction: crop images with editing software and use the relevant ones
on differnt breakpoints using <picture> element. here you can
use different media queries and different cropped img src.
you can also use <picture> element if you want to make use of
WebP images.
But there is lot of things <picture> forgets about responsive like
how big it the image location in the page layout? etc. it gets complicated
if you try to give all information in <picture> element. I dont like it.
** This is where srcset and sizes comes in:
In this technique you will write much less code than <picture> but
downside is "the browser decides which image displays".
* we will use a website reponsivebreakpoints.com that will help us make
a whole bunch of images for sourceset and sizes and it will write some
code to go with that.
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="your-image-url.jpg" alt="Your Image">
</body>
</html>
xxxxxxxxxx
<picture>
<source
media="(min-width:1600px)"
srcset="large-image.jpg, large-image-2@.jpg 2x">
<source
media="(min-width:1024px)"
srcset="medium-image.jpg, medium-image-2@.jpg 2x">
<img
srcset="default-image-2@.jpg 2x"
src="default-image.jpg">
</picture>