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:
<div class="image-container">
<img src="market.jpg" />
</div>
<div class="images">
<div class="image-container">
<img src="camel.jpg" />
</div><!--
Adding comment to ensure no whitespace between inline-block div elements from HTML file.
--><div class="image-container">
<img src="map.png" />
</div>
</div>
</div>
Notice how the market picture does not fall into .images .image-container, and so there is no conflict.
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).
it states that changing the images default display to block-level will
facilitate scaling
Could you please explain how block-level img are able to scale and inline and inline-block aren’t?
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
In this lesson, Codecademy used a <div> as the <img> container. However, there is a semantic element that you should use as an <img> container. This is the <figure> element
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.
Yeah you’re probably right. I just chalked it up to the fact that there are probably some CSS properties interfering with the max-width that we haven’t been introduced to yet
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.
this lesson sucked. the last two steps of the eighth page (out of ten: 8/10) didn’t do anything and didn’t explain what changed or explain why we should add those in.
Right?! It kept saying things to the effect of “the images look much better now” but they literally had the same problem as before or looked much worse.
) below!
) to up-vote the contribution!