A freeCodeCamp lesson requires you to include height: auto in the following snippet for the answer to be accepted:
img {
max-width: 100%;
display: block;
height: auto;
}
However, height is auto by default, so I don't see any reason this should be added.
I have seen this used in other people's code as well.
Is this just an oversight?
You are correct. The default value of height is auto (per MDN), and for the scenario you're discussing (making an image responsive), you do not need to specify that property.
That said, when editing styles of an existing project, you may find yourself in a situation where you need to override already written CSS rules. That's where knowing about height: auto would come in handy - if you wanted to overrule a hardcoded height on an image and set it back to the default behavior.
No, not really. Height: auto is default, regardless if you put a width or length. I doesn't really matter, unless you just want to write more code or something. It is also may be used because if for example if you have:
*{height:200px}
Then you would have to override the default. 200px;
Related
Is there a way to change the default block cursor used by Shellinabox to a vertical bar?
Using Chrome's inspector tool, I found this div:
<div id="cursize" style="left: 675.5px; top: 160px; visibility: hidden;">143x20</div>
but altering the value does nothing.
There is nothing about a cursor size in the page's styles.css file or any of the config files found in /etc/shellinabox/options-available.
If you know of a better place to ask a question like this, please tell me.
Those inline styles have been generated dynamically through means of something like JavaScript. Considering they are generated dynamically, simply manipulating their values won't reflect any change.
Having said that, you can override them with the !important declaration. Typically !important should only be used as a last resort, but inline styles have the second-highest level of specificity, and !important is the only way to override them.
Using something like the following should work for you:
#cursize {
left: 500px !important;
top: 100px !important;
}
Hope this helps! :)
I have a situation where I have a container element (div) that contains text. This text will sometimes be really large - not paragraph large, but it can potentially exceed the width of the text.
Obviously, in most situations it will just knock parts of the text to the next line, but I wanted to see if calc() can be used on font-size to change the size of the font to make sure it is always fitting within the bounds of the div it is in. Can this be done?
.name { width: 500px; font-size: 64px; }
<span class="name">Sometimes it is short</span>
<span class="name">Sometimes it is going to be really long, and people put long names</span>
I could just limit the number of letters people can use for a name - and to an extent I will, but I am curious to see if this can even be accomplished.
I found this post to do it with Javascript, but that was a long time ago, and I think CSS3 has a lot of new things that may let this be accomplished without any scripting. AutoFill
Here a possible solution:
http://codepen.io/CrocoDillon/pen/fBJxu
p {
margin: 0;
font-size: calc(4vw + 4vh + 2vmin);
/* See:
* http://codepen.io/CrocoDillon/pen/jgmwt
* For some math behind this
*/
}
Font-size is calculated with available size using a function that is not perfect, but may be adjusted to work well in some cases.
Calc is still in it's infancy in terms of support & usefulness. By design it's really just there for doing simple math, like (100% - 20px). It really won't do the math complex enough to make the calculations possible. You are looking for a solution that will size the text based on the amount of space the letters physically take up horizontally (which depends on the letter's individual sizing) and the amount of space available for the containing div.
CSS is abstracted away from the actual element's contents, and it has no way to really discern if something currently "fits" or not. It can layout guidelines for how to handle things when they do or don't fit, but it can't adjust itself according to the content like you want it to. (It's not just you, we've all faced this problem or a similar version of it at some point.)
Check out Chris Coyer's post on what Calc might be handy for: http://css-tricks.com/a-couple-of-use-cases-for-calc/
This is still nearly impossible in CSS only, as the size of each character in different fonts isn't known to us via CSS. There is a jQuery plugin called fitText that handles this sort of thing very nicely.
Just a clarification:
if you use something like:
font-size: -webkit-calc(100% + 30px);
font-size: -calc(100% + 30px);
what this does is add 30px to the 100% default font size, it can't be linked to the container width.
Although, you can do math there like:
font-size: -webkit-calc( 100% * 0.09479166667 - 6.666666669px );
font-size: -calc( 100% * 0.09479166667 - 6.666666669px );
... but it will just calculate it against the 1em.
I recommend you to use text ellipsis
.name{
width: 500px;
font-size: 64px;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
and if you need to control font-size, do it by #media in different devices
This can be done in pure css using the relatively new vi and vb properties.
https://developer.mozilla.org/en-US/docs/Web/CSS/length
These allow the font-size to be scaled in proportion to the container div's inline (vi) or block (vb) dimensions.
Presently only supported on Safari >= v15.4 and Firefox >= v101
e.g.
.name { font-size: 0.5vi;}
See also: https://caniuse.com/mdn-css_types_length_vi
I would like to calculate some value depending on other value. For example:
.my-div {
width: 50px;
height: calc(width * 2)
}
Is it possible?
See the MDN article on calc
This is an experimental feature, and would be possible- eg:
.my-div {
width: 50px;
height: calc(50px * 2);
}
However in this case as width is already known it would provide little value.
Typically in such circumstances you may be best relying on a library such as jQuery (or vanilla JS).
This is not possible in CSS, however CSS-preprocessors like SASS and LESS make it possible. Quite frankly this is one of many reasons why css-preprocessors have been developed.
I recommend you check the sites for more information.
I have been forced to work with some very poorly written CSS and I am not allowed to change it, only override its settings.
The issue is that it has something like this:
.some_div{ width: 10% !important; }
However, I need it to do the width in pixels, not percentage. SO, when I try to do the following:
.some_div{ width: 146px; }
There is no change. Even if I add an '!important'.
Does anyone know a good trick to override the % setting so I can use PX?
Add another rule with that is more specific with !important or add your rule after the existing rule. The last one will win.
.some_div{ width: 146px !important; }
Basically, I want to reset (undo) a Twitter Bootstrap 2.2 reset for img that originates from the reset.less file.
Twitter Bootstrap is essentially setting this css:
img {
width: auto\9;
height: auto;
}
What CSS can I add after this to undo this? I'm actually using the bootstrap-sass gem, so that's what I need to deal with.
If I comment out the CSS in the gem source, my issue is resolved, but that doesn't help me when the gem is loaded by heroku. So I need a local override/monkey patch to fix this.
Thanks. Here is the issue: https://github.com/desandro/isotope/issues/335#issuecomment-11507013 and here: https://github.com/twitter/bootstrap/issues/6541
The problem without this patch is that the awesome isotope library can't function properly as chrome and safari can't draw the images correctly.
You can add in a new duplicate selector underneath this one:
img {
width: auto;
height: auto;
}
That should override it.
Adding it into a new file that is called under the main one in the <head> section of your document would work too.
I posted the answer here: https://github.com/twitter/bootstrap/issues/6541
Inlining this in the CSS worked, like this:
<img src="blah-blah" width=398 height=265 style="width:398px; height:265px">
In fact, I also tested Isotope without using the width and height attributes, like this:
<img src="blah-blah" style="width:398px; height:265px">
And that worked fine! Any recommendation if it's better to only specify the CSS?
I was able to very easily test this without bootstrap (or bootstrap 2.0) by using this CSS:
img {
width: auto;
height: auto;
}
It seems that the width and height in the CSS do override the image properties, and before the images get loaded, the browser does not know how much space to allocate, and then, even after the images load, the spacing is still wrong, at least with Isotope. Inlining the style does workaround the issue. I think I tried using regular styles, but that didn't seem to work, but I may have had a CSS priority issue. Any way, since the image size is laid out with the image properties, it's rather natural to put in this tiny bit of inline CSS. I hope we eventually find a better solution, as this will surely affect others when upgrading.
Or at least this should be documented that one needs to use the inline style for the width and height of the image rather than the properties.