Responsive site; maintaining image height while decreasing width?

2 Views

This is the site I am working on: http://www.cmattayers.com/moushegianlaw/

I am trying to get the main image slider (the photo of the gavel) to be responsive, but to maintain the same height. Right now I have it so the dimensions of the image are being squished, by using:

Read More
#headerslider img{
    height:227px;
    width:100%;
}

But, I want to maintain the integrity of the image and have it slide to the left (out of view, as if it were in a “frame”) as the browser window size gets narrower. I don’t know how to accomplish this or if this is even possible. Is a pure CSS solution workable?

Post Views: 2

Related posts

1 comment

  1. You can use a background image on your #headerslider like the following and remove the image tag.

    #headerslider {
    background: url('http://www.cmattayers.com/moushegianlaw/wp-content/uploads/2015/06/gavel-header_wide.jpg') no-repeat center right;
    height: 227px;
}

    The only issue you might run into is your callout box isn’t set at this same height it’s just fitting pretty good at the moment but if that text were to shrink, the callout box height would not be as tall. You can set the height of the #callout to 227px as well while you’re at it to be safe.

Comments are closed.