Responsive images
How to » Create responsive images
Study in this chapter:
1. - How can I make image responsive in HTML and CSS?
2. - responsive image gallery
3. - responsive background image css
To create responsive images, set the CSS width property to 100% and height to auto, so responsive image is the image that automatically adjusts when the display size is changed.
We add CSS style to create responsive images as:Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
In line CSS - by using the style attribute in HTML elements
Example:
How To Create Responsive Images
Responsive images will automatically adjust to fit the size of the screen.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
width: 100%;
height: auto;
}
</style>
</head>
<body><h2>Responsive Images</h2>
<p>If you want the image to scale both up and down on responsive, set the CSS height to auto and width property to 100%.</p>
<p>Resize the browser window to see the effect.</p><img src="https://www.agernic.com/uploads/mountains.jpg" alt="Nature" class="responsive" width="800" height="600">
</body>
</html>
Related subjects:
Create rounded image in HTML CSSL
Position Text Over an Image HTML CSS responsive
Create a Sticky Navbar
Responsive image to a maximum size
If you need to restrict a responsive image to a maximum size, use the max-width: property to a maximum value that it requires.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
width: 100%;
max-width: 600px;
height: auto;}
</style>
</head>
<body><h2>Responsive Images - max-width:</h2>
<p>If you need to restrict a responsive image to a maximum size, use the <strong>max-width:</strong> property to a maximum value that it requires.</p>
<p>Resize the browser window to see the effect.</p><img src="https://www.agernic.com/uploads/mountains.jpg" alt="Nature" class="responsive">
</body>
</html>
Tags: responsive image html css gallery, background image css, What is a responsive image? How can I make image responsive?
Responsive image HTML CSS gallery
How to create a Responsive image HTML CSS gallery
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
width: 100%;
height: auto;
}
div {
width: 30%;
float: left;
margin: 10px;
border: 3px solid #F00;
height: auto;
}</style>
</head>
<body><h2>Responsive image HTML CSS gallery</h2>
<p>Responsive image HTML CSS gallery</p>
<div>
<img src="https://www.agernic.com/uploads/landscape_beach.jpg" alt="Nature" class="responsive">
</div>
<div>
<img src="https://www.agernic.com/uploads/nice-france.jpg" alt="Nature" class="responsive">
</div>
<div>
<img src="https://www.agernic.com/uploads/landscape_beach.jpg" alt="Nature" class="responsive">
</div>
<div>
<img src="https://www.agernic.com/uploads/landscape_beach.jpg" alt="Nature" class="responsive">
</div>
<div>
<img src="https://www.agernic.com/uploads/nice-france.jpg" alt="Nature" class="responsive">
</div>
<div>
<img src="https://www.agernic.com/uploads/landscape_beach.jpg" alt="Nature" class="responsive">
</div>
</body>
</html>
Summary of description
How can I make image responsive
Responsive images - how to
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.