I need help to understand one thing: a picture tag behaves like a container for an img tag if its parent has 'display: flex'.
If I add width:50% to img, it doesn't make img 50% of div but make img 50% of picture. If I add width:50% to picture and width: 100% to img it works as I need.
But why do I need to add style to the picture to make img 50% of div? I thought that picture is just an invisible wrap to keep sources. But it behaves like a div. Why?
<div style="display: flex;">
<picture style="width: 50%">
<source srcset="img/cmn/logo.webp" type="image/webp">
<img src="image.png" alt="img" style="width: 100%;">
</picture>
</div>
When using a <picture> element, it effectively takes over as the principal element of its content, the content becomes dependencies of the picture element. So how this works is expected.
You now work with the picture element and not with the individual image element(s) inside of it. This means you have to scale the picture element and not anything inside of it.
That said, it's common practice in responsive web design to always have img elements fill the full width of their parent container (width: 100%;), for responsiveness to become easier to handle and more predictable.
Authoritative information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
From the specification
The picture element is a container which provides multiple sources to its contained img element
So yes, it behaves like a div for the image and in your case the picture is the flex item (not the image)
Related
How can I resize two images via a percentage of themselves (their native size) and have those images appear horizontally adjacent without space between them?
The trouble I am having is the containing divs appear to be sized according to the contained images original dimensions, not the resized dimensions. Setting display:inline-block; does prevent them from wrapping, but only if the width of the view is wide enough to accommodate the original image sizes. It does not reduce the size of the div. I feel like I am overlooking something obvious, but am too close to see it.
This code is based on this answer to this question. I tried it with figure elements instead of divs per the same answer and with many variations with no luck.
Some of the other answers I was not able to use because my solution constrained to an antiquated wiki html editor that filters out attributes and tags it does not like on save (e.g. srcset).
.img-box {
width: fit-content;
display: inline-block;
}
.img-box img {
width: 25%;
}
<div>
<div class="img-box">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</div>
<div class="img-box">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</div>
</div>
I am new to Bootstrap, was going through w3schools lessons. I was trying following example:
W3Schools Tryit Editor
This example does not seem to work when I change the class from class="col-md-4" to class="col-xs-4" for all divs. All the images are losing their aspect ratios when I am resizing the browser to minimum width.
I think this behavior is not correct and images should resize and stack.
Please help me understand this behavior.
You just have to remove inline css from the
<img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
and replace it with
<img class="img-responsive" src="pulpitrock.jpg" alt="Pulpit Rock">
and if you want to add different sizes for thumbnail add one more class in your .css file, don't use inline.
This has nothing to do with the col-md or col-xs classes it has to do with that the images are wrapped in a thumbnail.
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
</a>
</div>
As you can see the <a> tag in this code above has the class of thumbnail. If you remove this class the images will overflow the div. In bootstraps css they have a max-width of 100% for all images in a thumbnail or thumnbnail <a>. If you want them to be responsive you should give them a class and a width in percentages and don't specify height or give height of auto and not use inline styles. If you want to remove the max-width you need to set this to have a max-width of none like this but this will cause the image to overflow the div.
.thumbnail > a img, .thumbnail > img{
max-width: none;
}
Here is a fiddle Fiddle
I'm taking a crack at writing a Javascript-based image gallery. Right now I have the code set so that I know the images will all be at the same height, but...
How can I arrange my markup and CSS so that all of the images will display on just one line, and when a new one would be outside the width of the browser window, the parts of the image that are 'out of bounds' are simply hidden and don't display on the next line?
I've been experimenting with overflow, float, and display in various ways for the images themselves and their container div to no avail. There must be something simple I'm overlooking here.
Right now the markup looks like:
<div id="slider">
<img src="img1.png" />
<img src="img2.png" />
<img src="img3.png" />
</div>
How should I style this so it displays on one line, even if the combined width of the images is greater than the width of the browser window?
Thanks.
#slider {
white-space: nowrap;
overflow : hidden;
width : 100%
}
I am destroying my mind trying to get this styling done right. I have a fixed size image with an unpredictable height div of text to the right of it. I want the top of the text to line up with the top of the image but to NOT wrap around it. My markup is:
<img height='231px' width='132px' style='float:left' />
<div>Text</div>
I would like to find a solution that doesn't involve using a table, but at the moment I am drained and can't think about how to do it with css/divs
This should do the trick.
<div style="margin-left: 132px">Text</div>
To have space between the text and the image, make the margin larger or add a padding-left.
DanielB's answer nails it, but I just like giving alternative solutions; never know if it might come in handy. You could put the image and the div into a container with a fixed width, set a fixed width on the image and div that adds up to the container's width, and float the div as well.
<div id="container">
<img height='231px' width='123px' style='float:left' />
<div>Text</div>
</div>
#container div
{
float:left;
width: 123px;
}
#container {
width:246px;
}
http://jsfiddle.net/thomas4g/A7ZHg/3/
I have a div i would like to make clickable. I know i need to make the div (and?) the link have a fixed width and height + display: block. I have an image inside of the div. It seems like the 'clickable' div is actually a large transparent link and this click does not play well with images as it doesnt share space. I need to right click the image and hit save as.
So how do i make the div clickable. I tried setting the img width and height but it made the img stretch.
You can set the <a> tag to fill the entire parent. Example:
<div>
<a href="..." style="display: block; height: 100%">
<img src="..." alt=".." />
</a>
</div>
and the entire <div> will be clickable.
To actually make a div into a link you have to use Javascript but from reading more into your question I'm not quite sure this is what you are asking. But if you ever do need to make a div into a link here it is.
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
It would be great if you could provide your markup so that we can see what you are seeing.
Thanks,
This answer is wrong! It doesn't pass HTML. I'm only keeping it up here so that other people can see it and know that it is not the answer to the question. (in case someone else had the same idea to this answer)
Why not just do something like
<a href="...">
<div>
<img src="..." alt="..">
</div>
</a>