« first day (1722 days earlier)      last day (2066 days later) » 

06:54
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
07:44
@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
Yep, pretty much. Rather avoid it (explicit values) to keep those img elements responsive to changes in viewport sizes.
08:19
I usually use percentages, but I thought that at least that was required
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.
So this is responsive, and it defaults to either 100% width, or 100% height, while keeping the aspect ratio
because I put max-width:100%; and max-height:100%;
But I never tell it that it should be at least 100% of one of them, that's why I don't know if it's always going to work like that
08:37
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 least 100% 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-qualify max-* 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.
Or unless your min and max constraints aren't the same amount
08:52
If I have min-width:100%; and min-height:100%;, the aspect ratio will be the same of the parent element
Hold on my brain isn't working right now
@Alesana When you want an image to scale to fit its parent, you only need to set the width (or its constraints) to 100%
Right it seems pointless to put min-width:100%; and min-height:100%;
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?
09:03
Yes haha
I am tired
That was a much, much simpler way to explain it
No where in the CSS do I tell it that it has to fill the parent in any way so that's why it doesn't feel right
@Alesana If the image is smaller than the parent do you want it to stretch?
e.g. if the parent is 2x2
2x2=1x1, right?
Yeah, just double the size
Or are we talking about size not aspect ratio?
Ah okay
If it does, that makes it a little more complicated
09:11
The image is always being stretched to fill the parent (either vertically or horizontally)
Are you asking if the image should only scale upwards downwards, or should scale upwards and downwards?
Yeah
Scaling only downwards is easy, jsfiddle.net/BoltClock/nheowyz6
What you have, basically
Ah, this is why I asked
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...
Hmm, it is a website for my freelance web development so I want to support most all browsers
Maybe if it were selling cars, someone would still buy a car if the logo looks messed up, but not with selling web development :P
I will go ahead and give it a fixed max-height
Thanks for the help!
No prob
09:32
Setting the image height ended up making more sense than setting the container height, and then setting the image top and bottom padding xP
 
8 hours later…
17:51
I've gotten 4 random upvotes on different answers throughout today. What the heck
I probably average 1.5 upvotes a week xD
@ZachSaucier nice
someone found one of your answers helpful? So they probably went through your other stuff thinking there might be more good stuff there
I average about the same, 1.5 per week
No, but I've checked 3 different times throughout the day, hours apart
the first time it was 2, then 1, then 1
posted on January 16, 2018 by CommitStrip

That does sound irregular, but not suspicious - so just roll with man :)
@UncaughtTypeError I never said it was suspicious :P
17:59
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.
@UncaughtTypeError Are you in school?
@ZachSaucier what gives you that impression?
You're assuming I had an impression
Yes. The question was unexpected, and gave me the assumption that it was based on an impression.
Based on the info related to your account and your comments, I'd guess uni student. I'm curious if that guess was correct
18:08
Curious. No, not a student - in any official capacity, but unofficially, always a student.
 
2 hours later…
20:08
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"
 
2 hours later…
21:51
@Mdermez those selectors are both targeting elements with class .label
If you don't want your labels to be affected by them then don't give that class to you rlabels
also why are you putting a class .label on your label elements? Just target the element
22:03
@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

« first day (1722 days earlier)      last day (2066 days later) »