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.
Related
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
So I'm trying to move from PNG to SVG, but I'm having some growing pains. I'd like to use embedded SVG so I can change their CSS attributes for their colour as well as having fewer resource loads. Although an issue I'm having is when the SVG is embedded it appears above the box provided, although if I use an img tag with linking to the SVG, the formatting is perfect.
In my picture, the box on the right has the img tag while the left box is embedded.
http://jsfiddle.net/fLWhu/684/
<span>
#Html.Raw(File.ReadAllText(Server.MapPath("~/Content/images/icons/1.svg")))
</span>
<span>
<img src="~/Content/images/icons/1.svg" alt="our linked in" />
</span>
Update:
After adding the
display:inline-block;
vertical-align:middle;
into the span, the result is.
The SVG part seems ok, you could try set a display:inline-block and vertical align:middle to the div.header .right p span element
If I'm placing a HTML5-Video element inside a div, it causes a larger height of the wrapper than the video element. The wrapper is 7px heigher than the video source. There is no min-height or something else.
Have a look! (Scroll down to the Video)
The video element is 513px high and the wrapping div (.image) is 520px high.
<div class="image">
<video muted loop autoplay style="width:100%;" id="video-player">
<source treatidasreference="1" type="video/mp4" src="/fileadmin/user_upload/bilder/projekte/04_Online_Film_3D-CGI/sparkasse_iserlohn/Sparkasse_175Jahre_FinalCut_01_1_1_NEU.mp4"></source>
</video>
</div>
The HTML5 video element is noted as being Flow Content or Phasing Content or Embed Content meaning it will behave like an inline element. It therefore honours whitespace around your HTML (like spaces, line-breaks etc).
Option 1: display: block;
Making it a block will remove the space under the video element that is reserved for the descender on the text. (Descenders are the bottom part of characters such as y, g, p etc that descend to the baseline).
To fix it, set your video to be:
display: block;
Option 2: vertical-align: top;
Set the video to have a vertical alignment of top. The space reserved for the descenders will still be there but it will appear towards the top of the video but because the height of the video will be that much more than the text it will never have an affect.
vertical-align: top;
See here for more information on the video tag and its
properties.
And here for more information on flow content.
And finally here for more information regarding font
descenders.
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
I am getting unexpected results when using vertical-align on an image with accompanying text. If the text is wider than the container, it wraps UNDER the image like this, instead of simply wrapping to the next line:
alt text http://preview.moveable.com/jm/verticalalign.png
My HTML is simple:
<ul>
<li><img .../> some text </li>
...
</ul>
I have a height and overflow-y:scroll on the UL (likely not relevant)
I have a height set on the LI that is large enough for the placeholder image plus spacing.
I have vertical-align:middle on the image to get the text in the right place, almost
The rest is just margins and borders
Am am NOT using floats
How can I get the text to wrap properly, perferably without more markup?
If the image is static i would use a background image on the li and then simply add left padding to allow for the correct spacing
li {
background: url(/images/foo.jpg) center left no-repeat;
padding-left: barpx;
}
you could also use a margin on the li to allow for spacing to the left of the image inside the ul
if the images are different i would simply apply a class to each li to distinguish the difference
edit for seo friendlyness:
add the images into the markup and then hide them with your stylesheet so the user only sees the image set with background image, Google bots ignore stylesheets so will be served the image in the markup.
li img {
display:none
}
As #graphicdivine pointed out, there are two ways to interpret "properly." If you want things to fill up all the space around the image, I would do what he suggested: use float: left; on the image.
If, instead, you wanted to have a vertical block of text next to the image, you could apply the following:
<li style="display: table-row;">
<img src="..." style="vertical-align: middle; display: table-cell;" />
<span style="display: table-cell;">...</span>
</li>
Same disclaimer as before, though: this is no good in IE. Also, it breaks your "no more markup" rule, though I'm not sure how you wanted to achieve a different result without making changes. Perhaps I didn't understand you correctly.
Seems to me you could float the image left.