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.
Related
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.
I'm trying to goof around with making a website about my favourite TV shows.
If you open the site you come on the starting page (duh) this page consist 7 images. Every images has a link to the website that tells something about the show.
But now comes my question: those 7 images from the starting page have a standard width. Now if you open the site in a smaller screen the images are not next to eachother anymore. So I want with diffrent screen sizes that the images stay next to eachother, is there a way to do this?
If you have a background you can use background-size: cover, but I don't use a background I just want the images to be "responsive".
The site
Give the image class height and width in %.
Here's a sample:
.image {
float: left;
height: 80%;
width: 20%;
display: block;
}
Use percentages. You could try to find more info about responsive websites. They usually work this way.
Here some css for one possible solution:(you can clear the current css you have)
a {
width: calc(100% / 7);
float: left;
}
a img {
display: block;// Probably not required, but just in case.
width: 100%;
height: auto;// Not required, just shows a bit better what's going on
}
Other options could be using tables(bad) or flexbox(fancy, but not too easy)
you just need to add width for images
.image{
float: left;
display: block;
width: 14.2857143%; /* 100%/7 will work on all browsers*/
}
I have set an image with the css set to a max-height of 220px and a height of 100%.
That should set (this) image width to 175px and height to 220px. Which works fluently in Firefox and Internet explorer but in Chrome (desktop, tablet & smartphone) it sets the height to 220px but the width(!) to 220px as well. Why is this, is this some kind of bug in Chrome or am I just missing something here.
Weird part is, that if you'll remove the height:100% part so you are only left with the max-height:220px, this problem does not occur.
See a more detailed example below
figure {
width: 100%;
max-height: 220px;
}
a {
width: 100%;
display: inline-block;
text-align: center;
}
img {
height: 100%;
max-height:220px;
}
http://jsfiddle.net/be5jT/ JS Fiddle Example
What's Going On:
If you use the inspector tool, the browsers are adding width:auto;, because no width rules are declared. I've researched a bit and I can't find any reason as to WHY, but it comes down the fact that Chrome and Firefox calculated "width:auto" differently. Firefox is calculating based on proportional, and Chrome is displaying native.
I've checked the CSS2.1 Width spec, and since we are talking about an image which is inline, we have a large number of conditions to check for. The one that I think applies here is:
Otherwise, if 'width' has a computed value of 'auto', and the element
has an intrinsic width, then that intrinsic width is the used value of
'width'.
Source - http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width
If I'm reading it right, that means that Chrome is technically correct, even though Firefox's method ends up looking better.
Alternative Fix Method:
lili2311's answer will work, but then you'd have to declare the width, which means that you'd have to use images which are the same proportions. You could also remove the height:``00%, which you already know. A third method would be to give the a a height:100%, change the max-height:220px to height:220px on the figure, and then remove the max-height from the img. This lets you only declare 220px once.
Code:
figure {
width: 100%;
height: 220px;
}
a {
width: 100%;
height:100%;
display: inline-block;
text-align: center;
}
img {
height: 100%;
width:auto;
}
Working Demo:
You no need to add height, set max-height only
DEMO
img {
max-height:220px;
}
Setting max-width as well fixed the issue for me in Chrome:
img {
max-height:220px;
height: 100%;
max-width:175px;
}
Demo: http://jsfiddle.net/be5jT/2/
I am loading images of various sizes and dimensions into my website.
Chrome, Opera and Safari all stretch the image so, that it doesn't look unnaturally stretched or skewed.
Firefox keeps the width of the original image and sets the image height to 100px.
This results in 50x100, 150x100 and 2000x100 images.
On the left side you see Chrome, on the right one you see Firefox.
I want all images to be exactly 100px high.
The image class looks like this
img.image-message {
padding-bottom: 2px;
height: auto;
width: auto;
max-height: 100px;
max-width: 100%;
}
Setting only height and width doesn't change a thing:
img.image-message {
padding-bottom: 2px;
height: 100px;
width: auto;
}
View live example at metahill.com.
You can use this user to login:
Username: test_t
Password: meta_hill_t
Hm, I think I've identified the root of your problem in the CSS. It actually isn't directly a style of the <img> element, which is what made it so hard to pin down. It lies in this definition in chat.css:
#chat .chat-entry > .chat-entry-message {
display:-webkit-box;
display:-moz-box;
display:-o-box;
display:box;
padding: 3px;
word-wrap: break-word;
}
The problem you see in Firefox relates to the display: -moz-box, which, as explained by Mozilla, causes children (such as the <img> elements you're having trouble with) of the styled element to grow to fill their parent. Changing the definition to something like:
#chat .chat-entry > .chat-entry-message {
display: block;
padding: 3px;
word-wrap: break-word;
}
will fix the observed problem, though I'm not sure if all those variants of display: box were there for some other purpose. (So I can't say if this fix will affect anything else.) Anyways, hope this is what you were looking for! If not, let me know and I'll be happy to try helping further!
Set the height to 100px, not the max height. The width will follow automatically to the height unless specifically declared.
Im currently building a horizontal scrolling portfolio. I want the images to be 100% high and width:auto. Everything works perfectly (pure CSS), but if the browser window gets smaller than the image width, it gets compressed.
Here is the link: http://www.bastards-design.de/wordpress/category/allgemein/portfolio/grafik/#alina
if the browser window gets smaller than the image width, it gets compressed.
I've looked through your code and found the following CSS in it, which causes the images to compress. If you remove it, the images would not compress.
img{
max-width:100%;
}
Seems like this rule is being inherited from bootstrap.ccs you are using. You should remove this rule or override it.
you need to remove max-width from bootstrap.css
you have currently as below:
img {
border: 0 none;
max-width: 100%;
vertical-align: middle;
}
not try removing max-width: 100%; as below:
img {
border: 0 none;
vertical-align: middle;
}
this should work.