CODEWITHSUNDEEP
javascriptcssajaxhtml
user1295516
user1295516

Reputation: 25

How to set image in html for any mobile devices

The problem is now: Different smartphones have different display resolutions.

There are e.g. 840x560, 480x320 or 800x480.

What do I have to write as meta-tags, css, etc. to fit the image in "every" modern smartphone to the Display?

I hope my concern was clearly described.

Upvotes: 0

Views: 173

Answers (2)

Antoine
Antoine

Reputation: 413

To target specific screen sizes you should use @media queries. Plus background-size: cover; will make your image fit the .block container.

See: https://developer.mozilla.org/en-US/docs/CSS/background-size

@media screen and (max-width: 840px) {
    .block {
        display: block;
        width: 100%;
        height: 100%;
        background: url(/path/to/image) no-repeat center center transparent;
        background-size: cover;
    }
}

Upvotes: 0

Caelea
Caelea

Reputation: 2348

img {max-width: 100%;}

will do the trick

Upvotes: 1

Related Questions