Menu
I want all (or just some) of my images getting resized automatically when I resize my browser window. I've found the following code - it doesn't do anything though.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="icons"> <div id="contact"> <img src="img/icon_contact.png" alt="" /> </div> <img src="img/icon_links.png" alt="" /> </div> </body> </html> CSS
body { font-family: Arial; font-size: 11px; color: #ffffff; background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed; background-size: cover; } #icons { position: absolute; bottom: 22%; right: 8%; width: 400px; height: 80px; z-index: 8; transform: rotate(-57deg); -ms-transform: rotate(-57deg); -webkit-transform: rotate(-57deg); -moz-transform: rotate(-57deg); } #contact { float: left; cursor: pointer; } img { max-width: 100%; height: auto; } How can I basically have a fullscreen design (with background-size: cover) and have div elements be at exactly the same position (% wise) when resizing the browser window, with their size also resizing (like cover is doing for the background)?
945
We can resize the image by specifying the width and height of an image. A common solution is to use the max-width: 100%; and height: auto; so that large images do not exceed the width of their container. The max-width and max-height properties of CSS works better, but they are not supported in many browsers.
In that situation we can use CSS max-width or width to fit the image. Use max-width: 100% to limit the size but allow smaller image sizes, use width: 100% to always scale the image to fit the parent container width.
Use background-size property to cover the entire viewport The CSS background-size property can have the value of cover . The cover value tells the browser to automatically and proportionally scale the background image's width and height so that they are always equal to, or greater than, the viewport's width/height.
To make the images flexible, simply add
max-width:100%andheight:auto. Imagemax-width:100%andheight:autoworks in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to addwidth:auto\9for IE8.source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
for example :
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } and then any images you add simply using the img tag will be flexible
JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
198
image container
Scaling images using the above trick only works if the container the images are in changes size.
The #icons container uses px values for the width and height. px values don't scale when the browser is resized.
Solutions
Use one of the following approaches:
% values.@media queries to set the width and height to different values based on the current screen size.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
