CODEWITHSUNDEEP
htmlcss
Syahri Ramadhan
Syahri Ramadhan

Reputation: 1

How to set image size

I have problem to set size image inner box. I want to set image full size inner box and position to center

I have tried it like this

<div style="width: 200px;height: 200px;border:3px solid #000">
    <img style="width:100%" src="https://cdn.gusmank.com/SON/the-pala-at-pandawa-cliff-estate-wedding-011.jpg"/>
</div>

And like this

<div style="width: 200px;height: 200px;border:3px solid #000">
    <img style="height:100%" src="https://cdn.gusmank.com/SON/the-pala-at-pandawa-cliff-estate-wedding-011.jpg"/>
</div>

Upvotes: 0

Views: 1322

Answers (3)

p4avinash
p4avinash

Reputation: 657

You can simply add the 'width' and the 'height' attributes in the 'img' tag in the main HTML file. Below is the code given, Check this out..!!

<img src='image.png' width='200' height='200'>

Upvotes: 0

KPopOG
KPopOG

Reputation: 85

Because the aspect ratio of the image doesn't fit nicely into the box, there will either be whitespace or something will be cut off unless you specify that you want it to take up both the maximum width and height. Then, it'll ignore aspect ratios and fill the entire box.

<div style="width: 200px;height: 200px;border:3px solid #000">
    <img style="width:100%; height:100%" src="https://cdn.gusmank.com/SON/the-pala-at-pandawa-cliff-estate-wedding-011.jpg"/>
</div>

Upvotes: 1

Julian Paolo Dayag
Julian Paolo Dayag

Reputation: 3739

You can turn it into a background-image of the container element and use CSS' background-size: contain to easily achieve that.

#my-img {
  width: 200px;
  height: 200px;
  border:3px solid #000;
  background: #000 url(https://cdn.gusmank.com/SON/the-pala-at-pandawa-cliff-estate-wedding-011.jpg) center center no-repeat;
  background-size: contain;
}
<div id="my-img"></div>

No matter what size your image is, it will be resized and fits comfortably inside the div. It will also detect which dimension is longer and use that as the limit, so you don't need to worry of either side being cut.

Upvotes: 1

Related Questions