Don’t see any change to the images when I add height: auto


#1

Just wondering what I’m missing here. I don’t see any change to the images when I add
height: auto. Changing the window size and selecting/deselecting height: auto for the elements in Firefox’s developer tools has no impact


#2

As with your first question, please remember to post a link to the lesson, and your CSS.


#3

OK.

I think I’m missing some things here.

Firstly, under “Community Forums”, I clicked the " Still have questions? View this exercise’s thread in the Codecademy Forums" link on each lesson page, which brought me to pages that seemed to specifically identify the exercise. E.g. “This community-built FAQ covers the “Scaling Background Images” exercise from the lesson “Sizing Elements”.”. From your reply, it would seem you have no way of knowing which exercise or lesson I’m asking about.

Secondly, you explained that I needed to create a topic rather than an FAQ. I’m not sure what the distinction is, or how to create a topic. As I mentioned above, I clicked the community forums and followed the instructions, which said I should click reply if “I have an answer or a question about the exercise”.

Finally, you asked me to remember that I need to attach a copy of the css. Absolutely, I will in the future. However, the instructions do not mention this. I’m guessing this was covered in the introduction to forums exercises I did many weeks ago, but I can’t remember any of that.

How to go about asking a question about a specific exercise seems a little opaque. I’ve started going through the information here , which I assume must cover this, but it’s taking considerable time. Maybe the instructions on the inital page could be clearer?


#4

At present there is a major overhaul of the forums underway so directions may be unclear until the dust settles. For the time being, if you have a quesiton relating to HTML or CSS, post in the Get Help HTML or Get Help CSS categories.

In the forum directory, navigate to one or the other and click New Topic. Include a link to the exercise, any error messages, and applicable code (whether HTML, or CSS as applies) for others to examine.


#5

OK. Will do.

Thanks.


#6

RE: the original problem;

The exercise I’m having difficulty with is Scaling images and videos.

I reset the exercise, and I’ve attached the post-reset css. I then performed steps 1-3, adding overflow: hidden, max-width: 100% and height: auto, for which I’ve attached the steps-1-3 css.

Comparing the two gives the following;

diff style-post-reset-exercise.css.txt style-steps-1-3.css.txt
12c12
<
---
>   overflow: hidden;
16c16,17
<
---
>   max-width: 100%;
>   height:auto;

Inspecting and checking/unchecking the height:auto; for the images in Firefox, seems to have no effect, as per the last two attached files.

style-post-reset-exercise.css.txt (1.5 KB)

style-steps-1-3.css.txt (1.5 KB)

Checked;

Unchecked;


#7

On your own machine you can isolate code better, and more effectively inspect it. The lesson editor is a hard place to do any versioning or discrete testing. If you really want to see how this project plays out, do it on your own machine.


#8

Thanks mtf. I gave it a go outside of Codecademy, but wasn’t able to get “height: auto” to change the image display in any way. I tried zooming in and out, and using Firefox’s “Responsive Design Mode” to simulate mobile devices, but to no effect. At a later stage I’ll try your other idea of isolating down to just a single objective to see if I can discover how “height: auto” can be used.

Many thanks.


#9

height: auto is really just telling the rendering engine to calculate the height given other relational data. It might be an exercise on the side to explore how this particular attribute/value fits into the grand scheme of things.

The real truth is that for a static element, the default height is, auto, but in some cases we have to deal with inherited values which we need to override, so invoke this declaration to restore the default.

Take for instance an image. Once we declare the width in an attribute, the height is calculated when not declared. We get the image scaled proportionately to the width, alone. If we assign a width in percentages, it makes that relative to parent container width, and Bob’s your uncle. 100% is full width, barring any margins.

Aside:

Padding is something best left to containers, not inline objects. Maybe it’s just me, but I hate to see padding assigned to <img> elements. It just doesn’t make sense and is contrived, even if it can be made to make sense. Blocks with margins is the way to go on such objects.

Back to height. This is a property that deserves to be explored. Look for ListApart and SitePoint articles, not to mention quirksmode, and HTML5Doctor. This is a concern that goes way back. Dig into it when you have some reading time. Until then,

height: 100%

#10

Thank you for the excellent explanation mtf! And for the aside on img padding vs. container margin, that is a most useful guide. And the great article/advice sites.

Thanks again for all your help. :slight_smile:


#11

height is not an inherited value, as it were. So my statement earlier is incorrect. The only precursor would be an assigned rule. Then it would be necesssary to override, so the above is not totally inaccurate. Only good research susses out these little details. To not avail one’s self of that is negligence on the part of an academic. Read the goods; be skeptical and fact/data check to get the real goods. That’s how programming is learned, too.


#12

I concur! I’m from a programming background and RTFM is my number 1 go-to. It’s part of why I asked the 2 questions re: auto & cover; I’d made changes that I thought I understood, but had no effect, and reading the Mozilla docs about auto and cover hadn’t got me any further in understanding what had “gone wrong”. With your help I now have a better idea of how to work out if something is actually working, but it’s not showing up in my environment. Alternatively, in some cases the default or inherited value is the same as what I’m setting, so no change should occur. Lots of food for thought and how to approach understanding HTML!

Cheers,


#13

Thanks for this information!