resize images when the webpage's window is resized
Question
I can't resize the images correctly inside the table when the web page is resized.
I've tried changing the width and height using the % but I don't know how to solve this problem! Can someone help me?
This photo shows what happens when the images don't resize correctly:
body { width: 99%; height: 100%; background-color: #EFEFEF; } table { border-spacing: 10px; } img { border-radius: 18px; border: 4px solid black; } .headerBackground { width: 100%; height: 400px; background-image: url(E:/Workspace/Sviluppo_Pagine_Internet/Blog/Blog_Images/AGGIUSTATE/UBUNTU.png); background-size: 101% 149%; background-repeat: no-repeat; background-color: black; border: 3px solid black; border-radius: 20px; } .mainTable { margin-top: 5%; width: 44%; height: 44% } .td6x6 { width: 100%; height: 100%; } .td3x3 { width: 100%; height: 100%; } .image6x6 { width: 100%; height: 70%; } .image3x3 { width: 97%; height: 70%; } .footer { border: 3px solid black; border-radius: 20px; background-color: black; width: 100%; height: 100px; text-align: center; margin-top: 3%; }
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="mainPage.css" /> <title></title> </head> <body> <div class="headerBackground"></div> <center> <table class="mainTable"> <tr> <!--PRIMA CELLA--> <td class "td6x6"> <a href="E:\\Workspace\\Sviluppo_Pagine_Internet\\Blog_Minimal\\BlogPage.html"> <img src="E:\\Workspace\\Sviluppo_Pagine_Internet\\Blog\\Blog_Images\\AGGIUSTATE\\Blog.png" class="image6x6"> </a> </td> <!--SECONDA CELLA--> <td class "td6x6"> <a href="https://github.com/user" target="GitHub"> <img src="E:\\Workspace\\Sviluppo_Pagine_Internet\\Blog\\Blog_Images\\AGGIUSTATE\\GitHub.png" class="image6x6"> </a> </td> </tr> <tr> <!--TERZA CELLA--> <td class "td6x6"> <table style="border-spacing: 5px;"> <tr> <td class "td3x3"> <a href="mailto:user"> <img src="E:\\Workspace\\Sviluppo_Pagine_Internet\\Blog\\Blog_Images\\AGGIUSTATE\\Email.png" class="image3x3" style="height: 67%"> </a> </td> <td class "td3x3"> <a href="https://www.linkedin.com/in/user" target="Linkedin"> <img src="E:\\Workspace\\Sviluppo_Pagine_Internet\\Blog\\Blog_Images\\AGGIUSTATE\\Linkedin.png" class="image3x3"> </a> </td> </tr> <tr> <td class "td3x3"> <a href="https://www.facebook.com/user" target="Facebook"> <img src="E:\\Workspace\\Sviluppo_Pagine_Internet\\Blog\\Blog_Images\\AGGIUSTATE\\Facebook.png" class="image3x3"> </a> </td> <td class "td3x3"> <a href="https://www.instagram.com/user/" target="Instagram"> <img src="E:\\Workspace\\Sviluppo_Pagine_Internet\\Blog\\Blog_Images\\AGGIUSTATE\\Instagram.png" class="image3x3"> </a> </td> </tr> </table> </td> <!--QUARTA CELLA--> <td class "td6x6"> <a href="E:\\Workspace\\Sviluppo_Pagine_Internet\\Blog_Minimal\\AboutPage.html"> <img src="E:\\Workspace\\Sviluppo_Pagine_Internet\\Blog\\Blog_Images\\AGGIUSTATE\\About.png" class="image6x6"> </a> </td> </tr> </table> </center> <!--FOOTER--> <div class="footer"> <h3 style="text-align: center; color: blue; font-size: 120%; padding-top: 1%">EMAIL</h3> </div> </body> </html>
2 answers
solution1
1 2016-03-28 21:43:24
your best starting ground would be to remove any 'width' or 'height' properties on the img tag. If you would like the image to scale, a good rule a thumb would be to use 'max-width: 100%' on the img, or in your case '.image6x6'. this way, the container will control the size of its image content.
Here is a good article on scaling images http://www.w3schools.com/css/css_rwd_images.asp
solution2
0 2016-03-28 21:41:13
you Must use Max-width:100%;height: auto; for images Like this img {Max-width:100%;height: auto; } and try div Elemet tables are old for Website scaffolding
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.