HTML Responsive
Responsive web design is used to make your web page look appropriate, good, and well placedon all devices (desktop, tablet, smartphone etc.)
Responsive web design uses HTML and CSS to resize, hide, shrink, enlarge, or move the content. It makes the content look good on any screen.
Responsive Images
Images which can be scaled nicely to fit any browser size are known as responsive images.
There are some way by which we can make responsive image
1) By using the width property : Set the CSS width property to 100% to make the image responsive and scale up and down.
2) By using the max-width Property : This method is best and most used because it facilitates that the image will scale down if it has to, but never scale up to be larger than its original size.
3) Change images according to the browser width : By using the HTML <picture> element, you can set two or more imagesaccording to the browser width. It will change the picture when you change the browser-size. i.e. desktop and phone.
<!doctype html>
<html>
<body>
<h4>Responsive Image by width property</h4>
<p>When we set the CSS width property to 80%,
it makes the image responsive.
Resize the browser window to see the effect.</p>
<img src="../image/html_css.jpg" style="width:80%;"><br><hr>
<h4>Responsive Image by max-width Property</h4>
<p>"max-width:100%" makes the image responsive
and also ensures that the image
doesn't get bigger than its original size.</p>
<p>Resize the browser window to see the effect.</p>
<img src="../image/html_css.jpg" style="max-width:100%;
height:auto;"><br><hr></body>
</html>
Responsive Image by width property
When we set the CSS width property to 80%, it makes the image responsive. Resize the browser window to see the effect.
Your image hereResponsive Image by max-width Property
"max-width:100%" makes the image responsive and also ensures that the image doesn't get bigger than its original size.
Resize the browser window to see the effect.
Your image here