Hello. I'm trying to make the images in this example responsive without success. Is it possible in HTML/CSS with this image replacement method or do you recommend another technique? <!DOCTYPE html> <html lang="es"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection,tv"> <title> My site </title> </head><body> <div id="top"><div class="widthWrapper"> <h1> <a href="/">My site<span></span></a> </h1> <div id="foo"> Foo graphic<span></span> </div> <!-- .widthWrapper,#top --></div></div> </body></html> HTML: /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img, fieldset { border:none; } hr { display:none; /* HR in my code are for semantic breaks in topic/section, NOT style/presentation, so hide them from screen.css users */ } @media (max-width:512px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } html, body { width:100%; height:100%; } body { display:-webkit-flexbox; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:center; /* Safari */ -webkit-align-items: center; /* Chrome */ -ms-flex-align:center; /* IE */ flex-align:center; /* ACTUAL CSS3 */ min-width:48em; /* for pre CSS3 browsers */ font:normal 85%/150% arial,helvetica,sans-serif; background:#fff; } .widthWrapper { overflow:hidden; /* wrap floats and margins */ zoom:1; /* trip haslayout, wrap floats and margins legacy IE */ max-width:70em; margin:0 auto; /* center */ } #top, #footer { width:100%; /* oddity of flex-shrink we have to 'fix' */ flex-shrink:0; background:#000; color:#fff; } #top { padding:1em 0 0 0; } h1 { float:right; position:relative; margin:0; padding:0 0 0.5em 0; overflow:hidden; height:70px; width:374px; } h1 span { display:block; position:absolute; top:0; left:0; margin:0 auto; height:70px; width:374px; background-image: url(http://placehold.it/374x70); } #foo { float:left; position:relative; padding:0 0 1em 0; overflow:hidden; height:70px; width:374px; } #foo span { display:block; position:absolute; top:0; left:0; margin:0 auto; height:70px; width:374px; background-image: url(http://placehold.it/374x70); } @media (max-width:47.5em) { body { min-width:192px; padding:0; } h1, #foo { float:none; text-align:center; margin:0 auto; } } Code (CSS): I used code from here: http://www.cutcodedown.com/for_others/chetan_tudor/
I really dont see any img tag in your html code, but what I understand is you want an image to be responsive, so for the purpose of a responsive image, you might want to try this code. <!DOCTYPE html> <html lang="es"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection,tv"> <title> My site </title> </head> <style> img{ max-width:665px; width:100%; } </style> <body> <div id="top"><div class="widthWrapper"> <h1> <a href="/">My site<span></span></a> </h1> <div id="foo"> <img src="http://img-9gag-fun.9cache.com/photo/a0pq4vX_700b.jpg"> </div> <!-- .widthWrapper,#top --></div></div> </body></html> Code (markup):
To simplify it, You only need this on your css code. img{ max-width:665px; /** this depends on what is the size of the original image**/ width:100%; } Code (markup):
Thank you. I want to make the image responsive via image replacement with CSS. Not sure if it's viable or could be better to use smaller images for small screen sizes.