Icon fonts are an increasingly popular alternative to image sprites for embedding icons in webpages.
One capability of images that I can't find an equivalent for is sizing the icon relative to the container element.
With an image, I could do something like:
<div style="width: 200px">
<img style="width: 100%"/>
</div>
but I haven't found any equivalent for glyph icons. Has anyone found a technique for sizing glyphs relative to the container?
This can't be done with CSS font-size, as the inherited size relating to glyphs is the parents font-size, and not it's box width.
It can be done with Javascript as mentioned here.
Matthew Riches put some code on JSFiddle to demonstrate this. I'm adding it here too so SO also has it:
<div id="container" style="width: 200px; background: #cccccc;">
<span id="container">M</span>
</div>
and some js:
$(document).ready(function() {
var fontSize = parseInt($("#container").height())+"px";
$("#container span").css('font-size', fontSize);
});
Related
I am trying to show image from my PC in my website using html file using css. The css, the image, and the html file are in the same directory the image is shown inside the web browser inspector as shown but not showing in the page it self Inspected Element
.logo {
background: url(https://placekitten.com/100/100);
}
<div class="logo"></div>
The div has no height — there is no explicit height in CSS and there is no content in normal flow to give it a height from the height: auto it gets by default.
Since it has no height, it is 0 pixels tall. Multiply the height by the width and you get a box that is 0 square pixels.
With a canvas size of 0, there is no space to display the image on.
Do something to give it a height.
.logo {
background: url(https://placekitten.com/100/100);
}
<div class="logo">
Here is some content.
</div>
That said, a logo is something that conveys information. It isn't decorative. You should express it with HTML not CSS, and include alt text.
<div class="logo">
<img src="https://placekitten.com/100/100" alt="Kitten Inc.">
</div>
The "logo" class must have a height in order to show its contents, you have several ways to set up the height:
01
inside your css, go to '.login' and between{ } write : height:100px;
result
.logo{
height:100px
}
02
Inline like this
<div class="logo" style="height:100px"></div>
03
Using jQuery, like this
$('.logo').height(100);
or
$('.logo').css('height','100px');
I have an image whose size I know.
<img class="example" src="img.jpg" width="1024" height="768" />
I want to have the width and height attributes set so it can layout where the image will be before it's downloaded. The image may take a second or two to come in, so when it does, I don't want the page to suddenly jump.
However, I also want the image to have width: 100%. Is there a way to achieve this using CSS?
I tried
.example {
width: 100%;
height: auto;
}
However, this ignores the aspect ratio I specified in the HTML. Is there a way I can use the width and height attributes defined in the HTML to keep the aspect ratio, but have the image to have width: 100% (i.e. the width of the parent)?
I don't want to use JS to achieve this, I don't want to hard code the proportions in CSS, and I'd rather not do any margin/padding hacks to achieve this.
Edit
Really, I'm just seeing if there's a better way of doing it than this,
https://jsfiddle.net/s6gkonbh/
[Update: updated link to fix broken external image url]
JSFiddle Demo
<div style="width:356px; height:452px; background-color:yellow">
<img class="example" src="https://live.staticflickr.com/1427/1370476027_aaf0621679.jpg" width="100%" />
</div>
just provide the width and height to the parent container division which will occupy the space of the image's dimensions while the image will load.
and set the width of the image to 100% and it will take height according to aspect ratio. Just set the background color of your parent div to white or something to blend with the background.
JSFiddle Demo
HTML:
<div style="width:500px; height:300px; background-color:yellow">
<img class="example" src="http://www.finnchat.com/app/uploads/2015/10/Blogi44_metakuva.jpg" width="100%" />
</div>
NB: image copyrights are with their respective owners.
Hi please try this remove the height and width from img tag
<img class="example" src="img.jpg" />
and css
.example {
width: 100% !important;
height: 100% !important;
}
The only way is by using javascript. Just set width 100% in css, then with javascript get the imatge width an multiply by the aspect ratio to get the desired height.
I've got a markdown with HTML built inside and I need to change the following:
<img src="..." />
Into
<img class="image" /> // Could also be a div, doesn't matter
And give it a background-image CSS style instead (this is due to webpack bundling and the fact I have no imports and variables in .md files)
Problem is that the first option loads the image properly without having to specify height/width, and the 2nd approach shows nothing unless I specify height/width.
Fiddle demonstrating issue
Why is this, and is there a way to bypass this without specifying height/width for every such occurence?
The best you can do is calculate the proportion of the img and then use the value for padding and cover to fit that:
As an example if the image is 1:1 proportion:
.image {
background-image: url('http://i.imgur.com/3Zh2iqf.jpg');
background-repeat: no-repeat;
background-size:cover;
padding-top:100%;
}
<div>
<div class="image">
</div>
</div>
I have a chunk of html that is dynamically generated. We show it both directly in a page and embed it into an iframe. The strange thing is the div block shown in two places has different height even through all styles are the same. The code is below and the live result is shown in the codepen(http://codepen.io/anon/pen/bdKVqX). Anybody have ideas why this is happening? much appreciated.
Html content
<div class="height-diff" style="width: 198px; font-size: 30px;">
<span style="font-size:12px">
<span>Barlett Knit</span>
</span>
</div>
The same content as above, but inject into an iframe
var html = '<style>.height-diff {background-color: green;}</style>
<div class="height-diff" style="width: 198px; font-size: 30px;">
<span style="font-size:12px">
<span>Barlett Knit</span>
</span>
</div>';
var doc = window.document;
iframe = doc.createElement("iframe"),
style = iframe.style;
iframe.setAttribute("src", "about:blank");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowFullscreen", "true");
doc.body.appendChild(iframe);
var contentDocument = iframe.contentDocument;
contentDocument.open();
contentDocument.write(html);
contentDocument.close();
UPDATED ANSWER: Your iframe html does not have a <doctype> declared and it is going into quirks mode. See codepen with doctype added. I can't believe I didn't notice that earlier.
This appears to be happening because you have not specified a line-height.
See this codepen with line-height added. This also seems to be a rendering bug. It appears white space is being added before the span in the primary document but not in the iframe. It is strange but Height is calculated correctly if you add other characters around the span or set the span to display:block;. Edit: Not strange, just quirks mode.
<div class="height-diff" style="width: 198px; font-size: 30px;line-height:1.2em;">
<span style="font-size:12px">
<span>Barlett Knit</span>
</span>
</div>
<br />
<div class="height-diff" style="width: 198px; font-size: 30px;line-height:1.2em;">
<span style="font-size:12px; display:block;">
<span style="display:block;">Barlett Knit</span>
</span>
</div>
It isn't exact answer, but i found when both element height will be the same. Add some characters (non white characters) directly to div element which you write to iframe.
I don't know why, but in opposite to the div element written by JS, div element in the HTML see characters inside it. Therefore adjust height of element to font-size;. It happen even if there is no direct characters inside.
I'm making a website (Although I know nothing about HTML & Photoshop).
Its quite a challenge for me and I'm pretty happy with what I got so far.
Now I want to make boxes / floating squares on the site.
So I wanted to do this by using a the div but I have no clue how :#
<div id="div1" style="background-image: url(../bg_content_middle.png);height: 129px">
HELLO IS THIS A BOX?
</div>
I have this in my style.css:
#div1 {Background: url("bg_content_middle.png");}
bg_content_middle.png is a 1 pixel high "bar" which I want between top and bottom.
And thats not even working :(
Please help me.
You're mixing in-line CSS with external CSS rules. The inline style with ../bg_content_middle.png is overriding the other background image url of bg_content_middle.png. You only need to define it once.
In this case you could go for a pure CSS solution:
<div id="div1">HELLO I AM A BOX ^_^</div>
#div1 {
background-color: #900;
border: #f33 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Please don't number your divs though, call them something relevant like <div id="content">.
Hope that helps
1) Make the B in background lower-case
2) Is the image in the same directory as style.css? If not, you'll have to link to the correct directory.
well, if all you want your div to have a backround, you can have something as simple as this example from this tutorial:
<body>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
</body>
First of all, you only need to define this particular style once, but inline styles (styles within the tag's <style> attribute.) take precedence. You should remove the inline style in this case, since it's redundant and double check your image paths just in case. Remember that css paths can be document relative, in which case they refer to the location of the css file, and are not relative to the HTML page.
If it's one pixel high you might want to set the repeat property as well. put this in the element's CSS:
background-repeat: repeat-y;
And set a width equivalent to the image width.
You need to set the position : absolute in your css. From there you can use top, left and height to position and size your tags