I already googled this problem and I found several answers. Most of them recommended to clean cache and cookies, which I did but it didn't work.
I want to display an image in my application. When I check the developer settings in Firefox, my image is loaded, but it doesn't show. It also says, its content is 0x20, even if I set the width and height to 100px and 80px. I even tried with the !important statement, but it still shows 0x20.
In Google Chrome it works totally fine but in Firefox it doesn't.
This problem actually seems pretty easy to solve but I really can't find out why it won't work and I tried so many options but none of them seem to work.
Any ideas?
EDIT
html
<i class="icon"></i>
css
.icon {
width: 100px;
height: 80px;
content: url(../imgs/icon.png);
}
You try to add a content to some element.
content is only supported by :before and :after. See W3C.
And <i> is an inline element, for giving it width/height through css add it as inline-block.
Change your CSS to the following should work, maybe add a display: inline-block;
.icon:before {
width: 100px;
height: 80px;
content: url(../imgs/icon.png);
}
This will change the size of the before, only when using responsive SVGs the image size will change.
I prefer to use a background approach:
HTML:
<i class="icon"></i>
CSS:
.icon {
display: inline-block;
width: 100px;
height: 80px;
}
.icon:before {
display: block;
content: "";
width: 100%;
height: 100%;
background: url(//via.placeholder.com/150x75) no-repeat;
background-size: contain;
}
This will change the image according to the container size. With background-size: contain the proportions are preserved. A content is needed when using before.
Try out.
Related
I was trying to have an image or maybe multiple images as a background and wanted it also it being simple to change it to a video as well, in case I want to.
However, with <img> I noticed an issue and with CSS, I couldn't reproduce the same that <img> did, so I came up with <video> and its attribute poster instead.
I'm wondering if that's a good idea. Below I explained what I tried and examples so you can see the difference between the <img> and CSS one.
I put an <img> as a background. The only issue is that it is selectable, however there are properties like user-select, but browsers like IE didn't support it.
Here is an example with <img>:
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
width: 100%;
}
body {
background-color: #090909;
}
div.background {
position: fixed;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: -1;
overflow: hidden;
}
div.background img {
position: absolute;
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none;
height: auto;
width: auto;
top: 0;
}
<html>
<body>
<div class="background">
<img src="https://i.imgur.com/sMzN1LP.png" draggable="false">
</div>
<div style="color: white;">Text</div>
</body>
</html>
https://jsfiddle.net/hd6orszb/1/
Here, when you zoom out, the image stays in the screen, it's like background-size: cover. And when you zoom in, after zooming over 100%, it will zoom in the image as well. Which was okay, however the <img> can be dragged and selected and user-select doesn't work anywhere. The attribute "draggable" does, however even if you add user-select: none;, if you press CTRL + A, and drag the Text, in Chrome at least you can see the image being dragged as well. And I didn't wanted that.
So I used CSS, because this doesn't happen with the "background" property:
https://jsfiddle.net/5n6mtyb4
Now if you zoom out there and zoom in, there's nothing that keeps resizing it, like I did for <img>, so I added background-size: cover. But if you zoom in and out it will stay the same, but I wanted to keep the effect <img> did.
So I didn't had any idea, what else I could do. I think with #media it might be a bit hard because it's zooming, where anything can have a different size, I guess.
Other thing was using <video> with the poster attribute.
https://jsfiddle.net/5n6mtyb4/1/
Which was unselectable like the CSS one and behaves like <img> just unselectable as well. However I'm not sure if this is the ideal way to do it and if there could be any issues with that.
So I'm wondering, if there's a better way to do it, or if <video> is completely fine as an alternative to <img>.
For IE9, you'll need to add unselectable="on" attribute it is like user-select:none;, and for drag you can add draggable=flase i find the background is the ideal, but video is fine also it has no problems with it using the poster.
Edit Nov 20: you can make psuedo element before Or after and they won't be selectable neither draggable, but you can't set width or height on the url(img)
You can accomplish this by adding these lines to CSS of your image:
img {
user-drag: none;
user-select: none;
}
That should be the answer.
I have the following class
.stats {
content: url('images/stats.gif');
background-repeat: no-repeat;
width: 23px;
height: 20px;
float: right;
}
and the following span
<span class="stats" ng-click="showTabDialog(player)"></span>
This renders fine in Chrome but I do not see the image in IE11 even though I can click in the place where the image should be and it works correctly
Why do I not see the image in IE?
Why do you have content: url('images/stats.gif')? The content CSS property only works with pseudo-elements ::before and ::after. I would suggest to try setting it as a background-image:
.stats {
background-image: url('http://onlywm.ru/vbfs_aBlackRed/misc/stats.gif');
background-repeat: no-repeat;
background-size: contain;
width: 23px;
height: 20px;
float: right;
}
<span class="stats" ng-click="showTabDialog(player)"></span>
content CSS property only works with the ::before and ::after pseudo-elements:
https://developer.mozilla.org/en-US/docs/Web/CSS/content
Chrome doesn't respect the specifications in that regard.
You should use background-image.
Add display-block to your css. The background-image CSS property only puts an image as the background. The width and height of an object is always defined either by static settings via CSS/inline styling, or by the actual size of the content displayed in it. In your case, since you haven't added any content between your tags, its x/y dimensions will be 0
.stats {
width: 23px;
height: 20px;
background-image: url('http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg') ;
background-repeat: no-repeat;
display: block;
float : right;
}
JSFIDDLE
three mandatory attributes in the css for rendering the image (other than the background-image):
height: 40px; //change size as needed
width: 40px; //change size as needed
display: block; //Tend to miss this one out
Without height and width, if your asset takes time to render, the element will not be alloted an region space. Without display: block, the image only exists in the background. (tried too many things before discovering this subtle mistake).
Other attributes are optional and needed based on your requirement of positioning the image.
I want to display image through CSS. But it is not displaying correctly. Can anyone help me to know that how can we display full size image in our browser without giving dam height property.
Thanks in advance.
Here is my markup:
<div class="Main_Content">
<div class="Slider">
</div>
Here is the CSS (not working)
.Main_Content {
width: 100%;
}
.Slider {
background-image: url("Construction%20Company/Stock%20Images/MG_5194-e1348062448312.jpg");
display: flex;
float: left;
height: 300px;
position: unset;
width: 100%;
}
.Slider {
background-size:cover;
background-repeat:no-repeat;
}
Will do the job. It will try to make the images as big until it reaches fullscreen.
See background-size property on MDN for more details.
Without using height use,
<img>
tag. This will definitely solve your issue.
sorry if the question title is weak, i can't quite sum my problem up into one snappy tagline...
I'm working on a website (using Joomla) and i've had to insert a DIV serving as a sidebar on the right side of the page. in order for it to be displayed "above" (or "over", i mean on the z-axis) the regular page content, i'm using a negative margin on the left side of it, covering the whole width of it, so it will simply float to the right and sit there, which works fine in ff and IE.
Since i've rarely ever run into issues with Chrome that were fine in IE, i didn't bother to check until quite late:
Now i see that in Chrome, the div is just sitting below (at the bottom of) the regular content; despite the "inline" display-types and the negative margin.
Now I've tried ridiculous things to make it work, but for some reason it just won't.
Can someone tell me how i can get it to work in Chrome?
HTML:
<div class="cframe">
<div class="content">
...
</div>
<div class="sideright">
...
</div>
</div>
CSS:
div.cframe {
display: table;
vertical-align: top;
}
div.content {
display: inline-table;
width: 751px;
padding: 60px;
}
DIV.sideright {
width: 200px;
float: right;
display: block;
position: relative;
top: 320px;
margin: 0px 0px 0px -200px;
}
...this is what i'm stuck with right now, it's all quite ugly.
[link to live-page removed as the solution has already been applied]
(The sidebar is the div classed sideright, and contains a module titled Archiv)
Thank you in advance
Change the div.content css to:
div.content {
display: inline;
float: left;
}
You're using float, but then setting the position to relative. You should remove the relative part of your css for the siderright and it should fix the issue
Edit: even better you should change the position to absolute.
Set your container div to position:relative and then position:absolute your sidebar in relation to that.
.cframe {
display: table;
vertical-align: top;
position: relative;
}
.sideright {
width: 200px;
position: absolute;
top: 320px;
right: 0;
}
I didn't test the answers above but I take their word that they worked. However, your question caught my eye, because I thought you were looking for a browser hack.
There are ways that you can tell an element to behave differently on a specific browser. This happens sometimes across browsers and the best way is to hack each individual browser and give them specific instructions. For chrome, of course you'll have to use a webkit.
This would be an easy example of the syntax to follow:
<p>TEST</p>
p {color:green;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
p {color:red;}
}
Try the DEMO in several browsers and notice how only chrome will display it in red
I have
.postImg {
text-align: center;
}
.postImg img {
max-width: 100%;
}
Which on Chrome downscales images when the window is downscaled, but does not upscale the image past it's width. Which I the desired behaviour.
But on Firefox the images don't get downscaled and stay the same size.
Putting width: 100%; in there ensures the Firefox downscaling, but upscales all smaller images, which is what I don't want.
I must have missed something basic here. And I do not know the size of the image beforehand.
Found it, grand parent of the .postLeft had
display: inline-block;
*display: inline;
Which actually did nothing just broke the images.