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');
Related
I am building a few websites and always have this same problem with css.
I have two images inside a div container.
When i put for example a text inside a div the div takes the heigth of the text but when i put an image in for some for me unknown reason the div suddenly seems to have a default heigth.
As you can see i have made the size of the images responsive in my css. I ve involved a color on the div just to give a clearer look on what happens.
When i narrow my browser screen the heigth of the div stays equal ( thus not being responsive) and for some reason the images are pushed down inside the div.
How can i solve this.I want the div container height to be responsive as the images inside are and holding the same height as the images and as i narrow the browser screen.
Last but not least ... what is it that i do not understand ?
Thank you for helping me out.
My code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="background-color:red;">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">
</div>
</body>
</html>
If you want the parent div to have a certain size, you should enforce dimension on the div and inherit its properties to its children...
div{
height: 50vh;
width: 50vw;
background: red;
}
div>img{
height: 100%;
width: 100%;
}
<div>
<img src="image.jpg" alt="text">
</div>
you should try adding display: block; to <img> tag.
I hope this help.
If you aren't using Bootstrap or another css framework, maybe you need to add reset.css file to your project. Example of reset: https://meyerweb.com/eric/tools/css/reset/
Please check this. I think it will help you. codepen
div{background-color:red;width:200px;overflow:hidden;}
div img{height:auto; max-width:100%;display:block;}
<div>
<img src="image" alt="text">
</div>
Try using max-width:100% on the image. This will keep it's size limited to it's parent size.
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 6 svg images that I would like to appear in a row, like this:
logo_1 logo_2 logo_3 logo_4 logo_5 logo_6
They are of varying widths, but are all the same height, so I used the height property to scale them at the same ratio. That works to scale the svg, but for some reason the img container is still the full width of the layout grid, resulting in each image getting pushed to the next line, like this:
[..............................logo_1............................]
[..............................logo_2............................]
[..............................logo_3............................]
[..............................logo_4............................]
[..............................logo_5............................]
[..............................logo_6............................]
Here's the code that does that:
<div class="gridContainer clearfix">
<div class="sponsorLogo">
<img src=_assets/images/logo_1.svg/>
<img src=_assets/images/logo_2.svg/>
<img src=_assets/images/logo_3.svg/>
<img src=_assets/images/logo_4.svg/>
<img src=_assets/images/logo_5.svg/>
<img src=_assets/images/logo_6.svg/>
</div>
</div>
.sponsorLogo img {
text-align: center;
height: 3em;
}
I can get them to line up in a row when I use the width property, but that causes the images to have non-uniform heights, kind of like this:
logo_1 LOGO_2 LoGo_3 lOgO_4 LOgo_5 loGO_6 (you get the idea. hehe)
Thanks in advance for your suggestions!
Try:
.sponsorLogo img {
text-align: center;
height: 3em;
display:inline-block;
}
Nothing seems to be working for me. But what I would like to do is make the header image fit to the size I'd like, which is the container. Heres the actual page link: this.
And heres the jsFiddle here: http://jsfiddle.net/Zorabelle/f7DRh/.
I think this is what I have to fix but I just don't know.
/*HEADER IMAGE DETAILS - HEADER MUST BE 921PX WIDE*/
.header {
background-image: url(http://media.tumblr.com/aceb30d864925524ee215c0d6f88e1bc/tumblr_inline_mu0br62w4R1s7znag.gif);
background-repeat:no-repeat;
height:200px; /*CHANGE TO THE HEIGHT OF YOUR BANNER*/
}
I want the 'Define the Term' header to fill up that whole space. Help?
Here's a working JSFiddle example: http://jsfiddle.net/f7DRh/2/
You can set the image size to container by specifying:
background-size:100% 100%;
That way it will always keep it within container's width and height.
Reference:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can also use the traditional replacing your div
<div class="container">
<div class="header">
</div>
becomes
<div class="upcon">
<img src="http://yourimage.com" style="width:100%" />
</div>
By the way, with this method the browser tries to render the image correctly if the user has a resoltion smaller than what your are asking (1050px). It won't crop it.
Implementing a "play video" function on a web site. Each video content item can have a different image. Each of these images will have the same width, but potentially differing heights (they are resized on upload to maintain aspect ratio to meet standard width requirements).
The plan was to display another transparent "play button" image over top of the content image using markup like this:
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<img src="PlayButton.png" alt="Click to Play" height="200" width="300" />
</a>
</div>
This is very similar to how channel 9 does it on their home page. This, however, appears to assume any image is of standard height and width. Are there alternative ways of tackling this?
Forgot to mention originally. We have a predefined width that things will fit into, however, each image may have a different height. For example, the same markup needs to be used to support the following images:
W x H
400 x 200
400 X 300
400 X 400
The Play button needs to be centered in each image.
Instead of the inner element being an <img>, you could make it a <div>, styled with the playbutton as the background image, positioned in the center.
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<div style='background:url(PlayButton.png) center center;' alt="Click to Play" height="200" width="300" />
</a>
</div>
You'll still need to know the size of the thumbnail image, as you'll still need to supply height and width for the div - since you're displaying the thumbnail as a background image, you won't be able to have the box scale to the right size automatically. But at least now your code can set the values for height and width without worrying about the shape of the play button getting distorted.
(note: the play button as a background image should probably be in a separate stylesheet rather than being declared inline as per my example; I did it like that to demonstrate how it differs from your original code, rather than to show best practice)
Need some your CSS to make sure things work, but this may help you:
.media {
display: table;
}
.media img {
display: table-cell;
vertical-align: middle;
display: block;
margin: 0 auto;
}
If not, please add you CSS so I can Fiddle it and make it happen.
I'd do it like this.
<div class="media">
<a class="videoLink" href="#"></a>
<img class="thumbnail" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"/>
</div>
Separate the thumbnail image from the link. We want the link to appear on top of the image, and the image to stretch the height of the <div class="media">.
The CSS:
.media {
position: relative;
}
.videoLink {
display: block;
height: 100%;
width: 100%;
background-image: url(PlayButton.png);
background-position: center center;
position: absolute;
z-index: 2;
}