Could you explain, how the following code works? Am I right that the first property is more specific than the second one?
If so, why do we encode the second “display” rule, especially since it seems to conflict with the first?
You are right in saying that .images .image-container has a higher specificity than .image-container img
There is no conflict as the first rule (.images .image-container) controls the 2 images at the bottom of the page, the one with the camel and the map. By setting them to display: inline-block we are allowing the 2 images to sit next to each other as opposed to on top of each other. Now remember that we are targeting the <div> with class="image-container" within another <div> with class="images", this means that the first picture, the one with the market, will not be affected as that picture does not fall within the <div class="images">.
Here is the HTML:
<img src="market.jpg" />
<img src="camel.jpg" />
Adding comment to ensure no whitespace between inline-block div elements from HTML file.
<img src="map.png" />
Notice how the market picture does not fall into .images .image-container, and so there is no conflict.
If you set the width of the <img> element to 100%, it would take up the full width of its parent container at all times.
However, when setting its max-width property to 100%, it will only take up the whole width of its parent container up to its maximum width. This means that if the image was 400 x 200px, it would only take up the whole width of its parent container up to 400px. So if its parent container was 300px wide, the <img> would scale down, but if it was 500px wide, the <img> wouldn’t take up the whole width of its parent container - it would only take up 400px of its parent container’s width
Finally, if you set the <img> element’s min-width property to 100%, it would take up the whole width of its parent container only if it has a width that is at least the width of the image. So, again, if the image was 400 x 200px, it would only take up the whole width of its parent container if the parent container was at least 400px wide
Hi, I’m having a hard time understanding this statement:
" The example above scales the width of an image (or video) to the width of a container. If the image is larger than the container, the vertical portion of the image will overflow and will not display. To swap this behavior, you can set max-height to 100% and width to auto (essentially swapping the values). This will scale the height of the image with the height of the container instead. If the image is larger than the container, the horizontal portion of the image will overflow and not display."
Can you please elaborate this one using another example?
in 8/19 #4 we get this
" Finally, within the same CSS rule, set the display to block . This will instruct the images to behave as block-level elements and facilitate scaling (as opposed to their default inline behavior)".
How are the images still inline even though we’ve changed it to block? Shouldn’t they be on different lines?
I was confused about what they meant by “facilitate scaling” too. However, earlier they mention “the last line will display images as block-level elements (rather than inline-block, their default state). This will prevent images from attempting to align with other content on the page (like text), which can add unintended margins to the images.”. I understand that we don’t want the image to be on the same line with other content, but I don’t have a clear answer to your question.
I was about to post exactly the same comment! I think a lot of this css stuff only makes sense when you are building your own pages and have to start tweaking things to get it to look the way you want.
I’ve got years of experience with CSS and I’m still torn between calling this particular lesson useless/more harm than good, and calling it a valuable intro to the endless issue of CSS properties either not having any prescribed effect on an element, or being redundant to existing effects in the first place.