Is it bad to have img {height:auto; width:auto; max-height:100%; max-width:100%;}? It works, but it just seems wrong.
I mean, I can even leave out the width:auto; to get the desired effect, but my gut is telling me that if either height or width is auto, the other should have a set value. I don't know why my gut is telling me that so it's probably not true
@Alesana It depends on your specific requirements. If you are working with images with unknown dimensions it's probably better to keep proportions as dynamic as possible. max-height: 100% and max-width: 100% will ensure that img elements never overflow containing elements, which is ideal for adaptive/responsive design.
@Alesana Generally, if you need to define explicit relative length units, for height or width property values, you already know what size those img elements need to be, or you expect them to be consistent.
I guess I didn't realize that it could have height and width be auto, I mean I know the aspect ratio of the image but I don't think there's a use case for putting explicit length units on it when auto does fine
Absolute length unit values (like percentages) are usually ideal for adaptive and responsive design too - but not required on images (like icons or small thumbnails) too small to be adversely affected by shifting viewport sizes.
Setting width and height to auto in CSS will permanently override the width and height attributes, in case that's important (and there are legitimate use cases for these attributes in the markup that aren't completely in the purview of CSS)
@Alesana If you require img elements to be at least100% consider using min-width and min-height properties instead. But, if I understand you correctly, you wouldn't be required to specify these properties if you are concerned that your elements won't remain at least 100% width, if the viewport becomes too small to contain it naturally, since you already have max-width and max-height properties declared.
@Alesana Keep in mind too that min-* property values will over-qualifymax-* property values.
So it would be redundant to have both declared in the same rule - unless you are declaring them in separately in different @media queries for specific conditions.
Height should be auto so the image can keep its aspect ratio
The max height can be 100% so if the image is portrait, it will not overflow its parent vertically if it's too tall
Setting w/h to auto means you want the image to always use its intrinsic dimensions (edge case of images without intrinsic dims notwithstanding) and ignore its w/h HTML attributes. Depending on the layout this may be a good idea or a bad idea
Anyways in my case I don't want min-width:100%; all of the time, nor do I want min-height:100%; all of the time, but it should at least be one of them, while also having max-width:100%; and max-height:100%;. So, when I resize the parent element to have an aspect ratio of let's say 4x1 and the image has an aspect ratio of 2x1, it would have a width of 100% and a height of 50% 100%
But if I then resize the parent element to have an aspect ratio of 1x1, but the img still has... an aspect ratio of 2x1, then the width would be 50% and the height would be 100%
To achieve this I have width:auto; height:auto; max-width:100%; max-height:100%; but nowhere do I say that at least the width or the height should be 100%, depending on the difference in the aspect ratios. It works regardless, I was just wondering if I'm doing it right
I way messed that example up
the first example it would have a width of 50% and a height of 100%, the second example it would have height of 50% and a width of 100%
I guess a much simpler way to put it is I want it to be the max size it can be, while keeping it's aspect ratio
@Alesana If I'm reading this correctly, do you want the image to always fill the parent either vertically, horizontally, or both, all the while maintaining its aspect ratio?
I assumed that what I had would scale upwards and downwards, but it didn't feel right
I didn't realize that the image was much larger than the parent element, I can keep it like that but eventually I was going to optimize the images which would make it smaller. I guess I am looking for a solution that scales both ways
Scaling both ways width: 100%; height: 100%; object-fit: contain (and an optional object-position value of your choice) is your best bet, but it's object-fit, so browser support...
No, that was just my observation. I've had a similar situation occur to me before - except it was a case of serial upvoting (100+) and was rectified by the system in time.
Hello guys. Please someone explain to me how the heck is "label" triggering the "text-input" event since the "focus" has only applied on everything else but label. https://codepen.io/ainarela/pen/XXZymN?editors=0100
I really don't get it.
.contact-form .input-text:focus + .label, .contact-form .input-text.not-empty + .label {
-webkit-transform: translateY(-24px);
transform: translateY(-24px);
}
There is no way that if you click on "label" to trigger the above condition and yet it's happening. The focus is only on "input-text"
@Mdermez I think what is going on is you are misunderstanding how selectors work. They are interpreted right-to-left
So the browser is looking at your selector, we'll say .text + .label {} for simplicity.
It sees the command "select any element with class label that is the adjacent element to a preceding element, at the same hierarchy level, with class text".
If you are trying to select .text elements that precede .label elements... you can't do that in CSS.
Unless you do a backward hack like reversing your styles to all elements and applying the "base" style to the .label class as an overwrite