CODEWITHSUNDEEP
htmlcss
servioret wedijotu
servioret wedijotu

Reputation: 15

Why div area still bigger more than image css?

Why div area still bigger more than image css ?

<div style="padding: 0px 0px;display: inline-table;background: red;">
            <img src="http://static.adzerk.net/Advertisers/3ce23fa868ea401dac7e2fcfda5ec312.png" style="height: 70px;padding: 0;margin: 0; ">
        </div>
https://i.sstatic.net/WHDU3.jpg

How can i do for set div area to fit image ?

Upvotes: 0

Views: 116

Answers (6)

Ayatullah Rahmani
Ayatullah Rahmani

Reputation: 932

With img tag Use Css vertical-align middle; width:100%;

<div style="padding: 0px 0px;display: inline-table;background: red;">
        <img src="http://static.adzerk.net/Advertisers/3ce23fa868ea401dac7e2fcfda5ec312.png" style="height: 70px;padding: 0;margin:0;
vertical-align: middle; width: 100%; ">
</div>

<div style="padding: 0px 0px;display: inline-table;background: red;">
        <img src="http://static.adzerk.net/Advertisers/3ce23fa868ea401dac7e2fcfda5ec312.png" style="height: 70px;padding: 0;margin: 0;vertical-align: middle;width: 100%; ">
</div>

Upvotes: 0

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

Is it fine now?

set width for image.

body,html{
  width:100%;
  height:100%;
  margin: 0! important;
  padding : 0! important;
  }
img{
  width:100%;
  height:100%;
  }
div{
  width:100%;
  height:20%;
  }
<div style="padding: 0px 0px;display: inline-table;background: red;">
            <img src="http://static.adzerk.net/Advertisers/3ce23fa868ea401dac7e2fcfda5ec312.png" style="padding: 0;margin: 0; ">
        </div>

Upvotes: 0

Narek Elbakyan
Narek Elbakyan

Reputation: 182

Add to image style="display:block;"

<div style="padding: 0px 0px;display: inline-table;background: red;">
    <img style="display:block;" src="http://static.adzerk.net/Advertisers/3ce23fa868ea401dac7e2fcfda5ec312.png" style="height: 70px;padding: 0;margin: 0;">
 </div>

Upvotes: 0

Alexander Taran
Alexander Taran

Reputation: 6725

IMG - is inline element, so it behaves differently than block type elements. You can override that by setting it's display to block

If you replace "inline-table" for "inline-block" for the div and set display:block for img - everything will be fine. There is a good description in this answer on SO

Upvotes: 3

Ansari NT
Ansari NT

Reputation: 1

you need to set width and height of div and for inside img set 100% of width and height.

i have update the code check now https://fiddle.jshell.net/xktb8wsL/4/

Upvotes: 0

VeeMo
VeeMo

Reputation: 13

Change the style in the div, this worked for me.

<div style="display: inline-table; width: auto; height: auto;">
    <img src="http://static.adzerk.net/Advertisers/3ce23fa868ea401dac7e2fcfda5ec312.png" style="height: 70px;padding: 0;margin: 0;">
</div>

Upvotes: 0

Related Questions