CODEWITHSUNDEEP
htmlimagecss
JohnDotOwl
JohnDotOwl

Reputation: 3755

Images in Smaller Browser

http://graduateland.com/

How do i prevent the images from compression. When I reduce the size of my browser window, the image get compressed side way, it's like the human head being compressed.

Looking at that website as an example, the image size isnt affected when screen size changes, only the position of the image changes. How do i do that?

Current CSS

position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;

Upvotes: 0

Views: 191

Answers (4)

Ennui
Ennui

Reputation: 10190

If you want images to be resized when the window shrinks, just change height: 500px to height: auto in the CSS you posted. This will force images to keep their original ratio as the width changes. The way your code works right now is that it resizes the image horizontally so it is never wider than its container, but has a fixed height, which messes up the aspect ratio once it begins to shrink horizontally.

If you want the image to stay the same size and just move position as the browser window shrinks you need to apply them as a background-image. Try this CSS code on the container div you want to apply the image background to:

#container {
    background: url(path/to/image.jpg) no-repeat center top;
}

Upvotes: 1

Halcyon
Halcyon

Reputation: 57729

Use @media, like:

@media screen and (max-width: 1280px) and (max-height: 1024px) {
    .splash {
        background-image: url('../img/splash-1280.jpg');
    }
}
@media screen and (min-width: 1281px) and (max-width: 1920px) and (max-height: 960px) {
    .splash {
        background-image: url('../img/splash-1920.jpg');
    }
}

In their CSS:

@media (max-width: 1280px)
    [id="get-started"] {
    background-size: auto;
    background-position: center top;
}

Which overrides:

background-position: center center;
background-size: 100%;

Upvotes: 0

nilobarp
nilobarp

Reputation: 4084

Here's the answer: Responsive Images with CSS

CSS:

max-width:100% !important;
height:auto;
display:block;

Upvotes: 0

idmean
idmean

Reputation: 14875

On the site you linked they are appyling this CSS

display: table;
width: 100%;
height: 100%;
margin-top: 0;
padding-bottom: 0;
background-image: url("a/image.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;

onto a div. But there are great inspector tools which can inspect that for you, so don't ask if you have a 'living' example.

You should particularly have a look at the background properties.

Upvotes: 0

Related Questions