1

Hello CSS guru's of stackoverflow. I am stuck on a problem and I think perhaps it is just not possible with CSS.

I want to combine these two rules and apply them both to the same image:

1) dynamically scale image as browser size changes

#main-graphic {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

2) center image and crop sides of image as browser gets smaller

#main-graphic {
  width: 2560px;
  height: 100%;
  margin-left: -1280px;
  left: 50%;
  position: relative;
}

But how do i do this with just CSS? Or is that not possible?

Mario S
  • 11,715
  • 24
  • 39
  • 47
deweydb
  • 2,238
  • 2
  • 30
  • 37
  • Yes, but that would still make it jumpy at each media query step. unless i used 1000 media queries. – deweydb Oct 19 '12 at 22:23
  • You could use it for the switch between the two CSS. Or maybe I don't get what you want :). – kapa Oct 19 '12 at 22:25
  • You should be able to use something similar to this: http://stackoverflow.com/questions/6282968/vertical-centering-variable-height-image-while-maintaining-max-width-height/6284195#6284195 – 0b10011 Oct 19 '12 at 22:34
  • bfrohs: that does not accomplish the cropping aspect, only the resizing aspect. – deweydb Oct 19 '12 at 23:11

3 Answers3

1

You'll need to make good use of Max/Min widths (and heights).

Here is a good place to start.

danchet
  • 410
  • 1
  • 7
  • 23
0

You could use the image as a background-image on an empty div for example. I'm not entirely sure of how you want it, but something like this could suit your needs.

HTML

 <div class="img"></div>

CSS

.img {
    max-width: 2560px;
    width: 100%;
    height: 100%;
    background-image: url('whatever.jpg');
    background-size: contain;
}
João Paulo Macedo
  • 15,297
  • 4
  • 31
  • 41
0

By setting a width in your second code block I am assuming you don't want to resize the image.

This will keep the image centered regardless of page width and crop sides if the browser width doesn't accommodate for it...

#main-graphic {
  display: inline-block;
  background-image: url('http://cux.waspdigital.com/wp-content/themes/creativeux/_/img/home-main.jpg');
  width: 100%;
  height: 228px;
  background-repeat: no-repeat;
  background-size: 1280px 228px;
  background-position: 50% 0;
}​

<div id="main-graphic"></div>​

http://jsfiddle.net/Xt2vM/

Michael Theriot
  • 994
  • 7
  • 13