Setting max-width style value for images inside carousel breaks width of the container. This happens even though max-width value would not affect actual width of the images. I cannot figure out why this happens.
I created a JSFiddle about this because I'm unable to explain this issue otherwise: https://jsfiddle.net/atmp9ymr/1/
So I'm basically asking why this happens? Is there a way to fix this? Any help would be appreciated.
--
Edit. I try to explain the issue here:
So I have images inline within a container. Container forces items to be inline by using white-space: nowrap and images have inline-block and display style. This container does have position set to absolute if that matters. Everything is fine currently. Container which holds images has correct width (according to images inside). Now if I set max-width: 100% for images, container width is broken. Even if image size does not change, width is not anymore correct. I cannot find a logic for that.
Please check the jsfiddle for better explanation.
Max-Width of the images relates to the containing element.
So max-width: 100% on the image means "use 100% of ".item". .item is not further restricted and by using position:absolute on #inner, you have set this element to 100% (of viewport).
Try adding "border: 1px solid red" to #inner and #container to see, where the elements are drawn.
As long as there is not speciefied what has to happen, wenn sizes exeed the container, this will happen.
Firefox, Opera and Chrome have a workaround for this.
#inner {
position: absolute;
top: 0;
display: flex; /* add display flex */
}
.item {
display: block;
vertical-align: top;
width: -moz-max-content; /* this will stretch the items to maximum width */
width: -webkit-max-content; /* this will stretch the items to maximum width */
width: max-content; /* for future */
}
Have a look at this jsfiddle.
The challenge here is the mixing of percentage widths with inferred (auto) widths, and combining this with absolute positioning.
max-width:100% means the browser has to translate a percentage value into something absolute. This may yield unexpected results if ancestors have width:auto (which by the way is the default), and are absolutely positioned.
In such cases, percentage values make little sense, and 100% might just as well be interpreted as 100% of the element itself – not 100% of the parent/ancestor.
If you want to use percentage values here, you should make sure that the ancestors' widths are clearly set (to something other than auto). However, this might prevent the #inner wrapper from dynamically adjusting its width to wrap all its .item children.
In the end, the easy/ugly solution may be the best: Set the max-width to an absolute value. (For example the pixel width of #container.)
PS: I created a variation of your case. Maybe you'll find it useful.
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.
The outer div have percentage width, and inner div's have display: tabel; width: 100%.
The inner div's show 1px less than outer div for some page widths while resizing. This adds an 1px line to the right.
https://jsfiddle.net/afelixj/utcswLp1/1/
Is there any fix for the bug?
This seems to be a specific webkit bug : https://bugs.webkit.org/show_bug.cgi?id=140371
The width of a display:table-* element is not always properly calculated when contained in a parent whose width is not defined with an absolute unit. You can see this issue in action here: Look at the right side of red elements
You can fix this issue in 2 different ways
You could define the width of parent element with an absolute unit or
You could apply display: table also to the container element. This doesn't really solve the bug but it should not be noticeable anymore (because it will affect also the parent element).
Your problem arises from the "60%" width of the container.
Chrome truncates decimals (300.5px will become 300px).
Therefore, when the inner div is set to "100%", it is calculated at the rounded width of the parent div
So, let's say that the outer div is 300.5px (60% of total).
The inner div is calulculated as 100% of 300px;
.wrap{
background: #000;
height: 400px;
width: 60%;
display:inline-table;}
Just change your css code like this
#media screen and (-webkit-min-device-pixel-ratio:0) {
width: calc(100% + 0.5px);
}
Notes:
adding 1px doesn't fix the problem on WebKit … it just inverts it
adding 0.5px introduces the problem on some non-WebKit browsers … wrapping it in a media query resolves this
Change your display:table to display:block.
I know this is rather late, but here's a fix for this bug i had to deal with too.
As mentioned in this thread the problem lies in the usage of percentage as a unit of width. The browser rounds the decimals down to a full number. So all we need to do is add 1 Pixel to the percentage based with. We can do that with calc:
width: calc(100% + 1px);
This will work in all major browsers exept IE 11 and older.
The use of display: table can come with the unwanted side effect that table css styles are applied on the div. Therefore I chose display: contents for my project.
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/
I'm trying to build a simple layout with fluid values (percentages for height and width). I got a container and a wrapper, but for whatever reason, I can't seem to change the width and height values of the wrapper.
I got a wrapper with the following values:
div.wrapper{
height: 80%;
width: auto;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
As well as a container with the same code but wider. When I remove the overflow: hidden-value, the wrapper will just becomes really thin and not actually "wrap" around any of the internal elements.
Since this is a kind of complicated problem, I posted my entire layout on JSBin:
http://jsbin.com/folaveda/1/
The problem is apparent there as well, as well as all the css that causes it.
You need to set the height property on the container, then you can set the child .wrapper to consume a percentage of its parent's element. Percentage heights and widths are relative to their immediate parent element's dimensions. In your scenario, the parent element is only consuming the dimensions of its children's contents, thus your perceived issue. Adjust the dimensions of the parent/s and you'll have your solution.
note, you'll likely need to set the dimensions on the body and html element explicitly to something like 100%, or a value that's more appropriate for your scenario.
I have a div element with style attached:
.mypost {
border: 1px solid Peru;
font-family: arial;
margin: auto;
min-width: 700px;
width: 700px;
}
I am diplaying WordPress post contents inside the DIV block but for simplicity let assume that there is only one <img> inside the DIV. I want my div to be minimum 700 px wide and adjust the width if image is wider than 700 px.
What are my options to achieve that? Please advice.
UPDATE
See my Fiddle
http://jsfiddle.net/cpt_comic/4qjXv/
One way you can achieve this is setting display: inline-block; on the div. It is by default a block element, which will always fill the width it can fill (unless specifying width of course).
inline-block's only downside is that IE only supports it correctly from version 8. IE 6-7 only allows setting it on naturally inline elements, but there are hacks to solve this problem.
There are other options you have, you can either float it, or set position: absolute on it, but these also have other effects on layout, you need to decide which one fits your situation better.
inline-block jsFiddle Demo
I'd like to add to the other answers this pretty new solution:
If you don't want the element to become inline-block, you can do this:
.parent{
width: min-content;
}
The support is increasing fast, so when edge decides to implement it, it will be really great: http://caniuse.com/#search=intrinsic
You could try using float:left; or display:inline-block;.
Both of these will change the element's behaviour from defaulting to 100% width to defaulting to the natural width of its contents.
However, note that they'll also both have an impact on the layout of the surrounding elements as well. I would suggest that inline-block will have less of an impact though, so probably best to try that first.
EDIT2- Yea auto fills the DOM SOZ!
#img_box{
width:90%;
height:90%;
min-width: 400px;
min-height: 400px;
}
check out this fiddle
http://jsfiddle.net/ppumkin/4qjXv/2/
http://jsfiddle.net/ppumkin/4qjXv/3/
and this page
http://www.webmasterworld.com/css/3828593.htm
Removed original answer because it was wrong.
The width is ok- but the height resets to 0
so
min-height: 400px;