I am creating a website that uses a fluid layout with artificial columns. I have an image at the top with some text to the side. I want the image to have a minimum size of 550px and a maximum size of 75% of the parent div. I tried this:
.class{
width: 550px;
maxwidth: 75%;
}
but it did not work.
Try:
.class {
min-width: 550px;
width: 75%;
}
The current CSS spec supports min-width and max-width, but not all browsers do. Namely, IE6. But most all other browsers on the market work fine.
Try replacing maxwidth with max-width.
I know that is request is old, but this will perhaps help some other people having the same problem.
I had the same worry and this resolve it:
.class {
min-height: 300px;
height: auto !important;
height: 300px;
}
Related
I am working on images with CSS and added this rule to the style sheet:
.sideimage {
width: 200px;
}
What this does to the images is that it makes the width 200px but the height is still the original one so the images are now out of proportion (the height is far too long).
I tried adding height: auto; to the rule but it didn't help:
.sideimage {
width: 200px;
height: auto;
}
There must be a simple solution to this but I haven't been able to come across it yet.
This is what the html looks like (not sure what is meant by stacksnippet):
<section>
<img class="sideimage" src="images/helgafell.jpg" alt="Helgafell">
<h1>Helgafell</h1>
</section>
I am using plain old css no bootstrap or anything. I want to make an img element responsive,thus shrinking and expanding while maintaining its proportions up to a maximum height. I have looked over several SO responses but have not found something that matches my use case. How would I achieve this. I have it kind of working with the following code.
<div class="imageContainer">
<img src="{{employee._image}}">
</div>
img
:max-width 100%
:height auto
.imageContainer
max-height: 300px
This solution works as the image gets smaller and it works when the image gets bigger up to the maximum height of the div at which point the image image overflows. I want it to stay within that div while maintaining its proportions. I have tried various combinations using max-height on the img and the div, but have not gotten it to work. Thanks for any help that can be provided!
The images have to be set dynamically, so hardcoding the url in css with background image is not an option.
Try setting the css top and bottom properties to 0px.
img
:max-width 100%
:height auto
:top 0px
:bottom 0px
To have an image set to a max-height of a div, the height property of the imager must be inherited from its parent.
The answer and theory around it can be found here: Child with max-height: 100% overflows parent
.container {
background: blue;
padding: 10px;
max-height: 100px;
max-width: 100px;
text-align:center;
}
img {
max-height: inherit;
max-width: inherit;
}
I believe I was able to achieve your goal like this:
img {
max-width: 100%;
max-height: inherit;
}
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'm trying to create a div that will expand to 100% of the screen height when there is not enough content for it to do so normally, but will expand normally beyond that if there is enough content. If my div is called container, then whenever I use
#container
{
min-height: 100%;
}
it seems to have no affect on the height at all. When I use
#container
{
height: 100%;
min-height: 100%;
}
it sets the height to a fixed 100%, cutting off any content that would normally be past 100% of the screen height. I'm not sure what I'm doing wrong.
You can try
body, html {
height: 100%;
}
Borrowed from this answer. You can also refer this.
Fiddle
Maybe could you give us a JSfiddle of your HTML ? It would help us helping you.
I think you could use:
#container
{
height: 100%;
overflow: auto;
}
Or play around with position/float/clear.
I’m trying to get an image (dynamically placed, with no restrictions on dimensions) to be as wide as its parent div, but only as long as that width isn’t wider than its own width at 100%. I’ve tried this, to no avail:
img {
width: 100%;
height: auto;
max-width: 100%;
}
Many of these images are way wider than their parent div, which is why I’d like them to resize accordingly, but when a small image pops in there and gets scaled up beyond its normal dimensions, it really looks terrible. Is there any way of doing this?
Just specify max-width: 100% alone, that should do it.
Found this post on a Google search, and it solved my issue thanks to #jwal reply, but I made one addition to his solution.
img.content.x700 {
width: auto !important; /*override the width below*/
width: 100%;
max-width: 678px;
float: left;
clear: both;
}
With the above I changed the max-width to the dimensions of the content container that my image is in. In this case it is: container width - padding - boarder = max width
This way my image won't break out of the containing div, and I can still float the image within the content div.
I've tested in IE 9, FireFox 18.0.2 and Chrome 25.0.1364.97, Safari iOS and seems to work.
Additional: I tested this on an image 1024px wide displayed at 678px (the max width), and an image 500px wide displayed at 500px (width of the image).
Setting a width of 100% is the full width of the div it's in, not the original full-sized image. There is no way to do that without JavaScript or some other scripting language that can measure the image. If you can have a fixed width or fixed height of the div (like 200px wide) then it shouldn't be too hard to give the image a range to fill. But if you put a 20x20 pixel image in a 200x300 pixel box it will still be distorted.
In line style - this works for me every time
<div class="imgWrapper">
<img src="/theImg.jpg" style="max-width: 100%">
</div>
You should set the max width and if you want you can also set some padding on one of the sides. In my case the max-width: 100% was good but the image was right next to the end of the screen.
max-width: 100%;
padding-right: 30px;
/*add more paddings if needed*/
I was also having the same problem, but I set the height value in my CSS to auto and that fixed my problem. Also, don't forget to do the display property.
#image {
height: auto;
width: auto;
max-height: 550px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
display: block;
}
I found an answer which worked for me and can be found in the following link:
Full Width Containers in Limited Width Parents
I found max-width:inherit; worked for me
I wrote this code:
div.image {
height: auto;
width: 100%;
}
div.image img {
height: inherit;
width: inherit;
}
max-width: fit-content; worked for me.
If the image is smaller than parent...
.img_100 {
width: 100%;
}
I would use the property display: table-cell
Here is the link