Menu
Being a designer today, one of the biggest obstacles of my life today is placing an image on a web page that fits in all browsers on all devices. Just to fit one image I tried to create a code like below and check by height and made sure image fit and image is in the middle of the screen. All I want is to put an image that is 600x894 in the middle of the screen regardless of the device and browser. If the screen size is smaller then image should be smaller as well. What is best way to do this?
img {position:absolute;left:50%;top:50%;display:block;}
@media only screen and (max-height : 600px) {img{width: 389px;height: 580px;margin-left: -194px;margin-top: -290px}}
@media only screen and (max-height : 700px) {img{width: 456px;height: 680px;margin-left: -228px;margin-top: -340px}}
@media only screen and (max-height : 800px) {img{width: 524px;height: 780px;margin-left: -262px;margin-top: -390px}}
@media only screen and (max-height : 900px) {img{width: 591px;height: 880px;margin-left: -295px;margin-top: -440px}}
444
Create multiple image files of different sizes, each showing the same picture. Use srcset / size to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
Here are three main reasons why we need to implement responsive images: Render a high-quality image on different devices. Loading the right image - Art direction. Faster loading web pages.
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
<style type="text/css">
img{
display: block;
margin: 0 auto;
max-width: 100%;
}
<img src="http://static.jsbin.com/images/dave.min.svg" alt="">
http://jsbin.com/wusoxilero/1
99
You could do something like the following. Try resizing the browser and look at how it resizes according to the width of the screen and it is always centered.
html, body { height: 100%; width: 100%; margin: 0; }
div {
display: block;
background: red;
height: 100%;
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
width: auto;
display: block;
}<div>
<img src="http://fc06.deviantart.net/fs17/i/2007/149/0/4/fire_wolf_by_frenky666.jpg">
</div>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
