CODEWITHSUNDEEP
htmlcss
ifusion
ifusion

Reputation: 3

How do you only scale/shrink an image horizontally with CSS?

How do you get the main image to only scale/ shrink horizontally like the pics on this website? Instead of scaling the image it starts to cut out the image's sides when you resize the browser. Heres how it should work: http://castus.co.uk/

The main image on the castus.co.uk website stays at the same height no matter how small you resize the browser but it shrinks the image's sides.. I hope that explains it better :)

I can only seem to get the whole image to scale when I resize the browser.

I am currently using the following code for my img class:

    img.mail {

    width: 100%;
    height: auto;

    }

Upvotes: 0

Views: 5308

Answers (3)

George Reith
George Reith

Reputation: 13476

They are using a centred background image and allowing the containing element to shrink thus hiding the sides of the image.

e.g.

#feature {
   background: url("path/to/img") center 0px no-repeat;
   width: 100%;
   height: 50px; // Height of image
}

example: http://jsfiddle.net/xY9qT/1/

Upvotes: 0

invisal
invisal

Reputation: 11181

Or do you mean this?

    background-position: center;
    background-image: url('....');
    background-repeat: none;

    width: 100%;
    height: 100px;

It cut instead of scale like what you have posted.

NOTE: You need to have wide picture to make it work prettily

Upvotes: 2

Fred Wuerges
Fred Wuerges

Reputation: 1965

I use:

max-width: 100%;
height: auto;

Upvotes: 0

Related Questions