I have a container div (width:100%) containing 3 more divs arranged along the container (of widths 33.3% each).
On decreasing the width of the window, all the images start to overlap. The text as well. How can I stop this?
I see that stack overflow has a mechanism which prevents the user to decrease width beyond a certain point.
You should use the css class min-width.
Eg:
.myclass {
min-width: 100px;
}
need to set 100% width to the image
img.class-name {
max-width: 100%;
width:100%;
}
Related
I have an image tag that I managed to align nicely to the rest of the divs in one section. However, as I resize the window, the image starts shrinking or expanding. What could I do in CSS to prevent this from happening?
.img-test {
width: 33.87%;
position: absolute;
max-width: none;
}
.clothes {
background-color: #d04925;
float: right;
height: 805px;
}
The image and the div with the .clothes class are one next to the other and it should stay that way.
You can use the max-width, min-width, max-height, min-height attributes to prevent the image from resizing. Here's a link with more information. w3schools
Hello and welcome to StackOverflow!
You set your image to a percentage value, or in other words to a fraction of the parent container. So if the parent container shrinks, the fraction of it gets smaller and the image shrinks, too! Now there are ways to prevent this, you could set a min-width, which defines a minimum width for your image. So it will shrink to this width, but it won't shrink below.
.img-test {
width: 33.87%;
min-width: 300px;
}
In this example, your image would never be smaller than 300px. You could also omit the min-width Attribute, and set a fixed width directly. But since you mentioned, that you managed to make it „look nicely“, this will propably wreck your whole UI, if the viewport of the browser is too small.
So I would recommend to consider rethinking your layout, if it only works with some specific widths. One way to do this are media queries. You define breakpoints in your CSS, and if the viewport gets smaller (or bigger), different CSS rules apply. You can read more about this here and here.
Just a small off-topic addition: The default value of max-width is none and it is not inherited, so there is no reason to set it to this value.
You need height attribute to be set to some value to prevent image from resizing. Example
.img-test{
height: 200px;
position: absolute;
min-width: 300px;
width: 33.87%;
}
This will help. Unless the image is inside a div whose height is changing.
I have a dynamic-height container (its height is specified in relative measurements), inside of it, two elements - a header, and an img, e.g.:
<div class="item">
<header><h1>Title</h1></header>
<img ... />
</div>
I want the image to show in its entirety. Its css is set with height:100% .
Because of the height that the header takes, the image is clipped a little bit below (it is has an hidden overflown edge), where I want its height to auto adjust (become smaller) to fit inside the container.
There is a solution, where I use calc(100%-[height of header]) for the height of the image, but since calc is not supported in all browsers I was wondering if there is a different more supported solution for this.
Here is a jsfiddle:
http://jsfiddle.net/7xLo7mr6/
(Apply the class fix to the container to apply the calc fix)
Perhaps CSS flex could be your solution for this one:
http://jsfiddle.net/7xLo7mr6/9/
Using flex-direction: column; and applying a max-width to the container (allowing the image to fill in the rest of the height after the header text while not stretching the width) could potentially solve your issue, but might cause you more troubles depending on what you're ultimately after.
Another option: http://jsfiddle.net/7xLo7mr6/11/
apply height: 7%; to the header and height: 93%; to the image
Make the clipping happen at the top of the image instead of the bottom:
http://jsfiddle.net/7xLo7mr6/13/
Apply position: absolute; to the header, give it a background: white; and width: 100%;, then apply a position: relative; to the container so that the header applies a width 100% to the container and not the body.
If you just want the image to shrink when its container shrinks, you can give it a max-width of 100%, and that will stop your image from growing so large it exceeds its container.
.item img {
height: 100%;
max-width: 100%;
}
It might be important to note that declaring height: 100% does not make elements 100% of the height of their containers, it makes them 100% of their own intrinsic height. The heights of elements are determined by their content, not the other way around. Read a full explanation here: https://stackoverflow.com/a/5658062/4504641.
http://jsfiddle.net/ingridly/337wrgj8/1/
What I am trying to do is have a container with a fixed height of 95% and a width of 100%. Then inside that div is an image with a variable height/width.
How would I go about keeping the container have a constant height/width but allow the image (changes with jQuery) to be any size smaller than the container and centered.
This is my current CSS that I have been playing around with but I havnt had any luck yet:
.gallery-image {
text-align:center;
line-height:0px;
min-height: 95%;
max-height: 95%;
width: 100%;
}
.gallery-image img {
max-height:65%;
max-width:95%;
}
Any ideas? Thanks.
Smaller than the container is relatively easy, you would just need to set the max-width and max-height styles --
max-width,
max-height
Centering is a little trickier; it will definitely involve some JavaScript. You will need to know the dimensions of the images (so if they haven't loaded you'll need to wait for them before you can read the dimensions), but assuming their dimensions are known here's an example method:
function centerImage(image,elem){ //elem is the parent container
var ratioDiff = (image.width() / image.height()) - (elem.width() / elem.height());
if(!isNaN(ratioDiff)){
if(ratioDiff > 0){
//center vertically - full width
image.css({width:elem.width()+'px',position:'relative'});
image.css({top:((elem.height() - image.height())/2)+'px'});
}else{
//center horizontally - full height
image.css({height:elem.height()+'px',position:'relative'});
image.css({left:((elem.width() - image.width())/2)+'px'});
}
}
}
This works by finding the ratio of height to width and scaling the image accordingly (setting left/top positioning where needed). It will basically always fill the image to the parent size and centered within the parent.
EDIT: I should mention this uses jQuery. You can accomplish it without (would just need to re-write the style setting and getting functions)... but why would you?
Sorry to ask a really obvious question I'm sure it has a really simple answer, I just can't figure it out.
Very simply I want to place images inside of divs, where the images fill 100% of the height of the div.
CSS
.container{
height:100%;
float:left;}
img {
height:100%;}
HTML
<div class="container">
<img src="xyz.jpg" />
</div>
The result is as expected but with a large amount of whitespace to the right of the image (within the div) when viewed in any non-webkit browser.
In my layout I want to have many of these divs lined up (by float) in a row so its essential that the div's width shrinks to that of the image.
http://jsfiddle.net/osnoz/VzrnT/
By default, a div without specified height dimensions only expands enough to encompass its contents. Without a specified width, the div will expand to the width of its parent. So until you specify the width, the div's width will not shrink down to the image.
Your div is set to 100% height, which is in relation to its container height, not its contents.
You also do not need to specify 100% on the image itself. This will only make the image stretch to 100% of its container's height. Unless, you specify a container height, this is pointless.
I don't know if I understood the question right, but here it goes:
.container { display: inline-block; height: 100%; }
.container img { height: 100%; }
See the example at jsfiddle.net/erxLv/2
I want to have the content of my website centred but only for a certain width of a webpage. So when it's over say 500px I'd want the content to then be fixed, unable to stretch any further. Is there anyway to do that, or am I best having everything fixed? Hope that makes sense ill add some visuals to be a bit clearer..
thanks!
http://i38.photobucket.com/albums/e126/aaron123456/stackflow.jpg
1.auto margin with a certain space
2.so content doesn't float in the middle of a larger webpage
It's quite simple:
#container {
max-width: 500px;
}
#container > * {
margin: 1em auto;
width: 300px;
}
#container defines the maximum width, and every element placed inside it is aligned centered. I had to set the width to prevent these elements from requiring the entire width.
See it in action