CODEWITHSUNDEEP
imagecssresponsive-design
user5616242
user5616242

Reputation:

CSS: responsive img size in div

I've an "info-section" (a div) where on the left should be a picture with 100% height of the div and 50% width of the div. The problem is, that the picture might be scaling too high and gets "unclear". So how could I solve this problem and still have a "high quality" image?

I tried it like that:

.preview-news-post:first-child {
    margin-top: 5%;
    width: 100%;
    height: 350px;
}



.preview-news-post:first-child img {
    width: 50%;
    height: 100%;

}

So preview-news-post is the div with a width of 100% ( because of a div wrapper, that 100% are equal 1600px )

Upvotes: 0

Views: 72

Answers (1)

Johannes
Johannes

Reputation: 67748

use a max-width or max-height setting that you set to the original width/height of the image. Also, I wouldn't force the image to be 50% of the header - this will in most cases distort the iamge and display it with a wrong heigth/width proportion. Instead, you can use auto for width, which will keep the original proportion in relation to the (flexible) height:

.preview-news-post:first-child img {
    height: 100%;
    max-height: 240px;
    width: auto;
}

(or the other way round: 50% width plus a max-width and height auto)

Upvotes: 1

Related Questions