All the inline element doesn't respect width value, they will take only required amount of width.
Why this is not the case with img tag? After setting the display to inline image is respecting width value specified in html.
https://www.w3schools.com/code/tryit.asp?filename=FYECKCZDC3GO
HTML
<!DOCTYPE html>
<html>
<body>
<img src="smiley.gif" style="display:inline;" alt="Smiley face" width="420" height="42">
</body>
</html>
My question is if you have span tag which is inline by default, now you if you add width to it, It will not have any rendering diff because span is inline. Why the same is not true for images?
If the element represents an image, the user agent is expected to treat the element as a replaced element and render the image according to the rules for doing so defined in CSS.
Height property apply to replaced inline elements.
More can be read here:
https://stackoverflow.com/a/12468246/7634550
https://www.w3.org/TR/css-display-3/#outer-role
Related
I replaced an <img> tag with a <picture> tag and the image is now scaled to the width of the container, instead of the height, and it's below the containing div.
The picture tag can be seen here (the logo): https://notzeroyet.com/?ign_skip=4742231701016
If I use the markup editor in the browser and just replace the picture with the enclosed img, the logo displays just fine. Didn't notice any positional CSS (div > img or similar) that would impact.
Why would this happen?
remove display: inline-block from #logo
Thanks #arieljuod, it worked.
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
I have the above line in my html body tag. But the height and width specified here are overridden by the height and width specified for the img in the stylesheet.
Why does this happen?
At this point your getting into more of styling the image element. The width and height attributes initially tell the browser the necessary amount of space it needs to make on-screen for these images when the page loads.
Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).
http://www.w3schools.com/TAgs/att_img_width.asp
Try inline style to override your css file or more specified your css selector for images in your html page.
<img src="img_forest.jpg" alt="Forest" style='width:600px !important; height:400px !important;'>
You can see width="600" is an attribute, but width:100px is a property. While rendering these attributes are converted to the respective style and placed at the beginning of the style sheet.
Check the accepted answer Click here. This is what you want.
That's because the width and height attributes set the intrinsic width and height of the image.
By default, width and height CSS properties have the value auto. Since images are replaced elements, this means the intrinsic sizes will be used (§10.3.2 and §10.6.2).
However, you can override that with some declaration, and then of course the image will be displayed with the specified size.
If you don't want this, add important inline styles, which can't be overriden:
<img src="img_forest.jpg" alt="Forest" width="600" height="400"
style="height: auto !important; width: auto !important" />
img {
height: 100px;
width: 500px;
}
<img src="/favicon.ico" alt="Forest" width="16" height="16"
style="height: auto !important; width: auto !important" />
I am trying to put the following class:
<div class="title1">
<img src="themes/images/logo.png" alt="logo"/>
<h5>Name</h5>
</div>
in one line by using the following line in the css file:
.title1{display: inline}
but i still get them in two different lines.
How can I change it to be inline?
To display you image and text inline, you have to change their individual display properties; changing the parent's is not enough. The image by default will display inline, but the <h5> displays as a block by default, which means it always takes up the full width so it displays on its own line. If you change the <h5> to display inline, it will display next to the image. Like:
.title1 h5 {
display: inline;
}
Your css applies to your main div "title1" however, you want this to apply to its children. You can test this css :
.title1 > img, .title1 > h5 { display:inline; }
<div class="title1">
<img src="themes/images/logo.png" alt="logo"/>
<h5>Name</h5>
</div>
However be sure to know that with inline display, you won't be able to set size as easy as inline-block.
The display property specifies the type of box used for an HTML element. I don't think is the right thing for your job. Try :
<div>
<img id = "img" src="themes/images/logo.png" alt="logo"/>
<h5>Name</h5>
</div>
And css : #img {float: left;}
Just try this,
<!DOCTYPE html>
<html>
<head>
<style>
h2{display:inline-block}
img{display:inline-block}
</style>
</head>
<body>
<h5>The New</h5>
<img src="themes/images/logo.png" />
</body>
</html>
if not work let me know
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
Imagine three images with fixed size:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.photos img {
width: 320px;
height: 240px;
background-color: black;
}
</style>
</head>
<body>
<div class="photos">
<img src="abc" />
<img src="def" />
<img src="ghi" />
</div>
</body>
</html>
When you look at such page in IE or Chrome, you'll see what I expected - threee images with fixed sizes.
In Firefox however, it doesn't work.
But if I set the images to display: block; or remove the DOCTYPE (doesn't show on jsfiddle) it works.
What am I doing wrong?
Thanks
This seems to be an old feature in Firefox: I found a discussion about it from year 2007:
So I suppose it’s intentional and won’t go away. I guess they might be thinking this way: Everything is fine if you set dimensions on an image, we’ll scale it. But if the image is missing, we will render the alternative text instead, and this changes the img element from a replaced inline element to a text, a non-replaced inline element, and for it we won’t support height and width, by the spec. Instead, the text determines the dimensions. And presumably the authors of Firefox think this is the right thing to do, and only in Quirks Mdoe do they do as other browsers do.
If you add alt attributes (as you should, every img should have one), you’ll see how the box size varies by text length. Apparently Firefox treats a missing alt here as equivalent to alt="", implying zero width.
This would explain why setting display to inline-block (or block) changes the behavior: then width and height are applied.
I think firefox wont be applying height and width to <img> element which are empty and hence it must be rendering like that, so use CSS display: block;
Here's my fiddle
Or use an image and see...
Updated : fiddle