I want to display an iframe at a fixed sized 1440px but scale that into a container on my page. I can get it to work with a fixed number e.g.
.scaled {
width: 1440px;
transform: scale(0.5);
transform-origin: 0,0;
}
However is it possible to scale this to fit it's parent container where the container is a percentage width e.g.
<div class="row">
<div class="column">
.... some content
</div>
<div class="column">
<iframe src="...blah" class="scaled" />
</div>
</div>
EDIT: Further description
So the ideal outcome here is to have the column being 50% of the row where the row width can vary with the viewport e.g. 900px, 1440px etc...
However, I want to have the iframe taking up the entire column width and displaying as though it were in a 1440px viewport. (Hence the width 1440px and scale transformation)
Unfortunately, this is invalid code as you cannot divide by a pixel length but something like this:
.scaled-proportion {
width: 1440px;
transform: scale(calc(100% / 1440px));
transform-origin: 0,0;
}
As you can read from MDN Web Docs and have also figured out yourself,
[In calc()'s division] The right-hand side must be a <number>.
Unfortunately, this means that this function cannot be used with two px/% values.
calc() was probably our only alternative to JavaScript, and, in absence of that, we'll have to use just that.
You can read the full guide at CSS-Tricks, or you can see a working example provided by them here.
Related
This has a demo:
<div style="position:absolute;">
<img
src="https://i.imgur.com/iQ2rVup.jpg"
style="width:100%;height:100px;"
/>
</div>
On Codepen
Chrome result:
Firefox/IE result:
I saw the W3C document.
Absolutely locate non-displaced elements are calculated as follows.
min(max(preferred minimum width, available width), preferred width)
https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width
Is the result of chrome wrong?
This will probably not answer the question but I will try to explain what is happening with chrome and why both can be correct.
First, you should notice that the same happen even if you consinder inline-block element or float as they are also shrink-to-fit elements
<div style="display:inline-block;">
<img
src="https://i.imgur.com/iQ2rVup.jpg"
style="width:100%;height:100px;"
/>
</div>
<br>
<div style="float:left;">
<img
src="https://i.imgur.com/iQ2rVup.jpg"
style="width:100%;height:100px;"
/>
</div>
Now it's all about the width:100%. Since it's a percentage value, the reference will be the width of the containing block but our containing block is a shrink-to-fit element which means that its width depend on its content. Here we have a kind of cycle.
Here is the part of the specification that describe such behavior:
Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the containing block’s size, the percentage behaves as auto. Then, unless otherwise specified, when calculating the used sizes and positions of the containing block’s contents: ...
So basically, we consider the width of our image to be auto, we calculate the width of the div (parent element) and then we use width:100% again on that calculated width.
Here come the difference. Firefox is considering the height set to the image in the calculation to find the value of the width of the image (as described in this part of the specification). Now that we have the new width of the image, the parent element will shrint-to-fit this width and we will reconsider the width:100% again based on the previous width.
Chrome is setting the width to auto BUT is not considering the height and in this case the width will use the intrinsic dimension of the image to have the following:
<div style="display:inline-block;">
<img
src="https://i.imgur.com/iQ2rVup.jpg"
style="/*width:100%;height:100px;*/"
/>
</div>
Now that we have the new width, we can calculate the width of the parent element (shrink-to-fit) and now if we set width:100%;height:100px to the image we wil have 100px for height and 100% of the containing block width which is the initial image width.
Now the question is: should we consider the height to calculate the value of new width of the image when this one is considered as auto in order to calculate the width of the containing block? If no Chrome is correct, if yes Firefox is correct.
Worth to note that in both cases the image may get distored. We don't notice this on Firefox in the actual example because the height is small.
Here is an animation to illustrate the distortion and to show the different behavior between both browsers.
img {
width:100%;
height:200px;
}
.wrapper {
border:2px solid;
animation:change 5s linear infinite alternate;
}
.wrapper > div {
border:2px solid green;
}
#keyframes change {
from {
width:500px;
}
to {
width:100px;
}
}
<div class="wrapper">
<div style="display:inline-block;">
<img src="https://i.imgur.com/iQ2rVup.jpg" />
</div>
</div>
The wrapper here is used as the containing block of our shrink-to-fit element and will define the available width. We can clearly see that in Chrome the image is always distored and in Firefix the distortion will happen later.
i have a 4-Column Grid. In Second Row 2 Boxes are only on the right Side.
See here my Scribble.
What i did till now is that i set here Columns with 25%. No problem here to the 4 Boxes in first Row.
The Second i Build this way up:
I made a DIV witch a set to 50% and set to Float Right. In this DIV i made 2 other Divs, witch i set again to 50%, but set them to Float Left.
<div class="column_2_4">
<div class="column_2_4">Content of Box</div>
<div class="column_2_4">Content of Box</div>
</div>
My Problem is now. How do i get the right Boxes good responsive? When i Resize Browser the Boxes are getting very small, because they Resize inside the 50% of the Wrapper. But would be better when the Boxes move from right to left and the Resize is same as in the upper 4 Column Boxes.
I can do this only, when setting up the Second Row same as the First Row, but make here the first two DIVs blank.
So in this way:
<div class="column_1_4"></div>
<div class="column_1_4"></div>
<div class="column_1_4">Content of the Box</div>
<div class="column_1_4">Content of the Box</div>
Your answer basically becomes more complicated depending on your method of nesting and margin/padding distribution.
To achieve this functionality, you must create a 100% viewport within the 50% viewport, keeping in mind that padding and margin add to width on the box level, if that makes much sense:
https://jsfiddle.net/2b0w13rL/
I didn't use your naming conventions, however I can explain. Your scenario comes into play with the following:
.half {
width: 48%;
}
.full_in_half {
width: 104.16666666666666666666666666667%; /* (50/48)*100 */
margin: 0 0 0 -2.0833333333333333333333333333333%;/* (1/48)*100 */
background: blue;
}
.full_in_half .half {
width: 46%;
margin: 0 2%;
}
<div>
<div class="half right">
<div class="full_in_half">
<div class="half"><span></span></div>
<div class="half"><span></span></div>
<div class="clear"><!-- --></div>
</div>
<div class="clear"><!-- --></div>
</div>
<div class="clear"><!-- --></div>
</div>
First, I converted .full_in_half to 100% width, relative to the parent by using a simple calculation (50/48)*100. I use 50 because I'm adding the left+right 1% margins...
From there, all I do is simply strip all margins and apply a negative left margin to bring .full_in_half fully into the viewport (1/48)*100. I must take into account parent's margin-left: 1%. So, my equation is now -((1/48)*100).
All that is fine, however, we still have some odd proportions. That's because the .half children widths and margins need to be updated to suit. We need to get 1% of 100% rather that 50% which is the size of the parent. Simple maths 100/50 = 2. Then margin should be 2%.
With the margin increased, we must decrease the width of the element to avoid overflow issues, thus width: 46%;
I hope this helps you and you should consider adding margin and padding to the child elements of the grid, rather than the grid itself. This practice helps the browser render more optimally and it gives you more control over your application flow.
#todo
This isn't yet a 100% viewport created though, but it can be with the use of padding and a change in negative margin. Learning is essential to survival. If you can take what I've shown you and then show me the 100% viewport, I'll feel like I've reached one person in this life.
I have a square image within .img-container. Sometimes it takes a few seconds for an image to load and the .img-container collapses and only takes the full height when the image loads. However, I would like it to keep the full height (as if the image is there) while the image is loading.
I would've easily done this by setting a min-height on img-container class, however it's a fluid grid and the image is responsive (notice bootstrap's img-responsive helper class) which makes it hard to set the min-height to an appropriate value for different screen sizes (although achievable with media queries as a last resort).
Solving this by putting a placeholding image sounds like an overkill (especially performance wise on mobile). Also, not sure what would load first then, the placeholder image or the actual image.
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card">
<span class="img-container thumbnail clearfix">
<img alt class="pull-left img-responsive" src="http://...">
</span>
<div class="caption">
<a href="http://.." class="card-title lead">
Some text
</a>
</div>
</div>
</div>
EDIT DUE TO COMMENT
If you do not specify a source at all (not even a dummy, temporary one), the browser will not even try to "guess" the image's height, and so it collapses. If you know the ratio of the image (it's obviously 1:1 in case of a square picture), you can use the following trick to preoccupy the space, and scale the image along with the div.
Set the following CSS:
.test-div-inner {
padding-bottom:100%;
background:#EEE;
height:0;
position:relative;
}
.test-image {
width:100%;
height:100%;
display:block;
position:absolute;
}
Then you can use the following HTML:
<div class="test-div-inner">
<img class="test-image" src="http://goo.gl/lO9SUU">
</div>
Here is the working example: http://jsfiddle.net/pQ5zh/3/
Note that the fiddle contains another div element, this is only required if you would like to give it all a padding or border, since the padding-bottom calculates the padding in pixels based on the width of the div INCLUDING THOSE PARAMETERS, which is NOT the effect we want to achieve (the image would be a little taller than it should be).
For non-square images:
If you would like to change the ratio of the picture, just change the padding-bottom of the container div accordingly. For example, if you would like to place an image with a ratio of 2:1, change the padding to 50%. To keep it short: the ratio of the container div's width and padding should always be equal to the ratio of the image's width and height.
There is an easy way to do exactly this, but it only works for square images.
Specify the width of the image (using CSS) to be 100%. This way the browser will automatically assume that the image height is the same as it's width, and preoccupy the place.
http://jsfiddle.net/pQ5zh/2/
.test-image {
width:100%;
}
Note: There is a way to achieve this for non-square images too, but that is a bit more complicated.
EDIT: See above.
Ok, assuming all images are square, we can do it. Add an extra div around your image like this:
<div class="img-container">
<div class="image-wrap">IMAGE HERE</div>
</div>
Then we want CSS along the lines of
.img-container {
position:relative;
background: #ccc;
width:200px; /* Remove this width */
color:#000;
}
.img-container:before{
content: "";
display: block;
padding-top: 100%;
}
.image-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
See this in action:
http://jsfiddle.net/jamesking/LNvmY/
You'll want to remove the width set in .img-container
I am trying to put an image with absolute position inside a .well div. I have to keep the image position absolute as I would like to create a responsive image using following CSS format. But the image appears out of the div scope.Here are my code for html and css
<div class="container">
<div class="well">
<img class="img-polaroid" src="http://testimage.png" />
</div>
</div>
.css
img{
position: absolute;
max-width: 80%;
top: 10%;
left: 10%;
}
As you can see I cant change the position property to 'relative'. I also tried to add a height:auto; property to .well class but it didn't go through neither.
Why is there a need for absolute positioning, you're using percentages which are relative units to the containing element. So therefore if your <img> tag is inside of the div then it's percentage width or height, let's say 50% will always be 50% the height or width of the <div> (this is presuming that the <div> is fluid).
Max-width is a good thing to be using.
Another technique for scenarios requiring finer tuning is to figure out the dimensions of the image and compare it to the size of the page. Let's say an image is 500 X 100 and the page width is 1200px wide document. The calculation to find out the percentage is (500 / 1200 ) × 100 = 41.66%
This is why in the Bootstrap.css file all widths are given in percentage.
Hope I've explained it all a bit to you.
I want to make a website that fills the pagewidth to 100% for all widths (available space) lower or equal to 1280px and for all widths greater than 1280 two filling side bars should appear (like this: |fill|website|fill|).
(How) can i do this without scripts? (by using css settings?)
You could use something like this:
#content {
max-width: 1280px;
width: 100%;
margin: 0 auto;
}
That refers to the style applied to a div that has all the page's contents.
Your "sidebars" would be whatever the background body is.
Do you want content in the "fill" bits, or just a border type thing? If just a border, you can use a background image/colour to make the fill effect, and use max-width on the main content bit. Be aware that it won't work in IE6, if that's important to you.
<div style="max-width: (bar width * 2) + 1280">
<div style="max-width: 1280px">
<!-- content -->
</div>
</div>