CODEWITHSUNDEEP
javascripthtmlcss
Breakpoint
Breakpoint

Reputation: 428

How to not hard code size of image in HTML? (Code Included)

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }

    .abcd{
        width: 100%;
    }
</style>

<body>
<div class="abcd">
    <img src="color.jpg" >
</div>
</body>

resolution of color.jpg is 2560x1440 and screen is 1920x1080. The image exceeds screen. If I hardcode it for a resolution it might be a problem for other screen sizes. I'm looking for "match_parent" of Android XML type of thing so that image takes only size of the screen.

Thank you, everyone, who took out their precious time to answer my question. I'm indebted.

Upvotes: 0

Views: 468

Answers (3)

deEr.
deEr.

Reputation: 557

You can use percentage on the width.

But you have to go up from HTML to define the parent’s percentage.

html,body {
    width:100%
}

.abcd {
    width:100%;
}

img {
    width:100%
}

Upvotes: 1

null
null

Reputation: 1162

Try below. Set css to img tag instead.

Check out this JSFIDDLE code.

img {
    width: 100%;
}

Upvotes: 0

brunnerh
brunnerh

Reputation: 184516

One approach is to set a percentage for the width. If the parent has position: relative the percentage will correspond to the parent's size, so 100% would match the parent width.

Upvotes: 0

Related Questions