Related questions
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 stepSolved in 3 steps with 2 images
- the html code is like this ---- <!DOCTYPE html> <html lang="en" dir="ltr" id="top"> <head> <metacharset="utf-8"> <title>Gallery zoo </title> </head> <body> <header> <h1>zoo </h1> <h3id="zoop">zoo</h3> </header> <linkrel="stylesheet"type="text/css"href="n.css"> <scripttype="text/javascript"src="n.js"></script> <body> <scriptsrc="unit3.js"type="text/javascript"></script> <headerid="top"> <h1> Z O O </h1> <h3id="ZOO">this is zoo</h3> </header> <nav> <header> <ulstyle="list-style-type:none"> <li><ahref="#elephantSection">elephant</a></li> <li><ahref="#bearSection">bear</a></li> <li><ahref="#lionSection">lion</a></li> <li><ahref="#monkeySection">monkey</a></li>…arrow_forward<!DOCTYPE html> <html> <head> <title>JavaScript & jQuery - Chapter 5: Document Object Model - Example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/c05.css"> </head> <body> <div id="page"> <h1 id="header">List</h1> <h2>Buy groceries</h2> <ul> <li id="one"><em>fresh</em> figs</li> <li id="two">pine nuts</li> <li id="three">honey</li> <li id="four">balsamic vinegar</li></ul> </div> <script src="js/example.js"></script> </body> </html> remove their list items and add your own for the following game consoles: Xbox Series X Xbox Series S Playstation 5 Playstation 5 DE Nintendo Switch Nintendo Switch Lite Use the javascript methods for removing nodes,…arrow_forwardwhat I have so far <!DOCTYPE html><html><head><meta charset=”utf-8”><title>Lab1</title> <style>body { background-color: #556271; margin: 0 10%; font-family: sans-serif; color: white;} h1 {color: #FE6A67;text-align: center; font-weight: normal; text-transform: uppercase; border-bottom: 1px solid #D4DCCD; margin-top: 30px;}h2 {font-size: 1em;}</style> </head> <body> <h1><img><br><img src="21.png"><p>Amet Justo Donec</p></h1> <p>Cursus EgetPurus sit amet volutpat consequat mauris nunc congue nisi vitae. Suscipit tellus mauris a diam maecenas sed enim ut sem viverra aliquet eget sit.<p/><h2>Cursus Eget</h2><p>Purus sit amet volutpat consequat mauris nunc congue nisi vitae. Suscipit tellus mauris a diam maecenas sed enim ut sem viverra aliquet eget sit.<p/><h2>Diam</h2><p>Urna condimentum mattis pellentesque id nibh tortor. Id aliquet…arrow_forward
- Design a webpage that has the following layout using HTML and CSS. Styling MUST be written in EXTERNAL CSS filearrow_forwardI am having some issues completing this assignment. Any help would be greatly appreciated. Thank You! HTML: <!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>Shape Up!</title><link rel="stylesheet" href="main.css"></head> <body><div class="container"><header><div class="headerImg"><img src="images/shape_up_logo.png" height="105" width="140"/> </div><div class="headerTxt"><h2>Shape Up!</h2><h3>Find the best fit for you</h3></div></header> <main><div class="sidebar"><aside><h2>Additional Resources</h2><ul><li><a href="diet/index.html">Physical activity and health</a></li> <li><a href="diet/index.html">Stretching exercises</a></li> <li><a href="diet/index.html">Strength training</a></li> <li><a href="diet/index.html">…arrow_forwardImages are important to web design. You want to be sure you include enough images to grab the reader's attention but not too many to overwhelm them. What are some pages with too few, too many, and just the right amount of images?arrow_forward
- Database System ConceptsComputer ScienceISBN:9780078022159Author:Abraham Silberschatz Professor, Henry F. Korth, S. SudarshanPublisher:McGraw-Hill Education
Starting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSON
Digital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON 
C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSON
Database Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage Learning
Programmable Logic ControllersComputer ScienceISBN:9780073373843Author:Frank D. PetruzellaPublisher:McGraw-Hill Education