2 Replies - 1010 Views - Last Post: 28 September 2014 - 08:27 AM

#1 monzdz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 30-April 14

Resize image proportionally with CSS so it works in different platform

Posted 10 September 2014 - 01:11 PM

hi there Im trying to Resize image proportionally with CSS so it works in different platform sizes.
this is what I have and its not working. I have to keep the height at 18.750em cause then the image dosnt even show up. but its not being resized at all when viewed in different screen sizes.

.easyCommercial {
display: block;
margin: 0 auto;
height: 18.750em;
float: center;
margin-right: 0%;
margin-left: 1%;
margin-top: 0px;
margin-bottom: 30px;
background: url(../images/refinishing-easy-as-123-b.jpg) no-repeat;
width: auto/9;
max-width: 100%;
max-height:100%
width:auto;

Is This A Good Question/Topic? 0
  • +

Replies To: Resize image proportionally with CSS so it works in different platform

#2 mixahlos  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 27-September 14

Re: Resize image proportionally with CSS so it works in different platform

Posted 27 September 2014 - 01:04 PM

You shoud use css media queries to do this.
you can find information here :
Media Queries for Standard Devices
Was This Post Helpful? 0
  • +
  • -

#3 bastones  Icon User is offline

  • New D.I.C Head

Reputation: 6
  • View blog
  • Posts: 35
  • Joined: 03-January 09

Re: Resize image proportionally with CSS so it works in different platform

Posted 28 September 2014 - 08:27 AM

You can use background-size: contain on the selector which contains the background image. Using this means the size of the background image will be based on the actual width and height of the container it resides in. So on a smartphone, the background image would be smaller since the container would also be smaller in size. See: http://www.w3schools...round-size.asp.

Unfortunately, background-size is a CSS 3 feature and is not supported in IE 8 and below, and some older versions of Firefox and Opera only support background-size through their own proprietary CSS property (see below). I would personally avoid relying on background-size for at least a couple more years because many people still use versions of Web browsers that do not support it. If you really need to use background-size and also need to support IE 7 and/or IE 8, you can get background-size() support in these versions of IE through the use of a polyfill.

  • For Firefox 3.6, use -moz-background-size()
  • For Opera 10.1, use -o-background-size()

For a full cross-browser compatibility list for background-size, see: http://caniuse.com/#...ground-img-opts

Code example for IE 9+, Firefox 3.6+, Chrome 4+, and Opera 10.1 and above:

-moz-background-size: contain;
-o-background-size: contain;
background-size: contain

This post has been edited by bastones: 28 September 2014 - 08:30 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1