Using HTML and CSS how to make a responsive image need a responsive image inside a column, I am making a 3 column layout need the image in the first column I am unable to position it better my code flexBox Header Column 1 Column 2 CATS DOGS MICE Rabbit! Duck Elephant Column 3 Footer 3
Using HTML and CSS how to make a responsive image
need a responsive image inside a column, I am making a 3 column layout need the image in the first column I am unable to position it better
my code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flexBox</title>
<meta name="Phone" content="Number">
<style>
#header{
background-color:#FF6347;
}
#col1{
background-color:#FFD700 ;
width: 30%;
float: left;
}
#col2{
background-color:#00BFFF ;
width: 50%;
float: left;
}
#col3{
background-color:#FF69B4;
width: 20%;
float: left;
}
#footer{
background-color: #90EE90;
clear: left;
}
ul {
display: flex;
justify-content: space-between;
flex-direction: column;
padding-left: 2px;
height: 65%;
}
li {
list-style: none;
display: inline-block;
background: tomato;
padding: 5px;
width: 170px;
height: 75px;
margin: 5px;
line-height: 70px;
color: white;
font-size: 3em;
text-align: center;
}
#contaner{
display: flex;
justify-content: space-between;
height: 780px;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="contaner">
<div id="col1">Column 1
<picture>
<!-- picture with different source sets-->
<source media="(min-width: 500px)" srcset="popularYouLogo_Itas1.png">
<source media="(min-width: 380px)" srcset="popularYouLogo_Itas2.png">
<source media="(min-width: 600px)" srcset="popularYouLogo_Itas3.png">
<img src="popularYouLogo_Itas3.png" alt="image">
</picture></div>
<div id="col2">Column 2
<ul>
<!---unordered list in main column -->
<li class="item">CATS</li>
<li class="item">DOGS</li>
<li class="item">MICE</li>
<li class="item">Rabbit!</li>
<li class="item">Duck</li>
<li class="item">Elephant</li>
</ul></div>
<div id="col3">Column 3</div>
</div>
<div id="footer">Footer 3</div>
</body>
</html>
A responsive image means an image which fits automatically to its screen size.
Multiple ways are there to implement responsive images:
Method-1:
Using responsive class in image tag,
<img src="xxx.jpg" alt="alt_name" class="responsive">
In image tag, set Class attribute to "responsive".
Method-2:
- Using the srcset, sizes, and media attributes in the image tag,
- srcset attribute used to the width of the image along with image file source.
- sizes attribute to specify the size of the image related to its viewport through media condition.
- Media attribute used to define media condition.
<img src="xxx.jpg" srcset="src width" sizes="" alt="alt_name" c>
Step by step
Solved in 3 steps with 2 images
