I have a div of fixed width and height.
I want to put and image and caption to it (using img and figurecaption) such that they both never exceeds the dimensions of the parent.
I tried this :
`
parent->
height: 100px;
width: 100px;
margin: 0;
img->
display: block;
height: 100%;
width: 100%;
figurecaption->
text-align: center
`
When the image is of greater size than the specified height and width, the caption goes outside. How to deal with this. Thanks.
If you are trying to avoid both the image and the caption going outside the parent container, you have several options. The nicest might be to set the image max-height and max-width to 100% and then to overlay the caption on the bottom. If you want to keep them completely separate, you can do something like this:
#container {
height: 400px;
width: 300px;
border: 1px solid #000000;
text-align:center;
}
#image {
max-height: calc(100% - 50px);
max-width: 100%;
}
#caption {
background: #282828;
max-height: 50px;
width: 100%;
text-align: center;
color: #ffffff;
}
<div id="container">
<img id="image" src="http://www.fixedstars.com.au/images/runBack.jpg">
<div id="caption">This is the caption</div>
</div>
This sets the maximum height of the image at100% less the height of the caption. If you prefer for the caption to be stuck to the bottom of the container, even if the image is shorter, st the container to position: relative and give the caption position: absolute; bottom:0; for the container and the caption.
To Fix this issue you have to set width and height to 100% for Image
Below is the complete demo.
Hope this will helpful to you.
<style>
.mydiv {
border-color: red;
border-style: solid;
height: 50px;
width: 80px;
}
.imgStyle {
height: 100%;
width: 100%;
}
</style>
<html>
<div class="mydiv">
<img src="http://www.boltoday.com/wp-content/uploads/2014/10/only-3d-natural-1024x768.jpg" class="imgStyle" />
Your Text Goes Here
</div>
</html>
Related
My apple-pie-icons image in CSS is not responding to any height attribute. It responds to width, but not height.
Could I be including it in the wrong div?
I've tried using pixels and height percentages - no response.
What am I doing wrong?
HTML
`<div class="container">
<div>
<div>
<img src="images/apple-pie.jpg" alt="Apple Pie" styling="width: 100%; height: 400px">
<h1>Apple Pie</h1>
</div>
<div id="description-container">
<div id="Apple-pies">
This was my grandmother's apple pie recipe. I have never seen another one
quite like it. It will always be my favorite and has won me several first place
prizes in local competitions. I hope it becomes one of your favorites as well!
</div>
<div class="apple-pie-icons">
<img src="images/recipe-info.png">
</div>
</div>
</div>
`
CSS
* {
font-family: Arial, Verdana, monospace;
}
.container {
width: 80%;
}
img {
position: relative;
width: 100%;
height: 500px;
}
h1 {
position: absolute;
top: 175px;
color: white;
width: 100%;
left: 32%;
font-size: 300%;
}
#description-container{
width: 650px;
height: 800px;
margin: 50px 200px 0px 200px;
}
#Apple-pies {
}
.apple-pie-icons{
display: inline-block;
height: 100px;
float: left;
width: 80%;
}
The icon is an image, and your CSS is defined as
img {
position: relative;
width: 100%;
height: 500px;
}
If you want to change the height, you can either change the height attribute there, or give the image a class and change the height that way (change the image tag to <img class="apple-pie-image" src="images/recipe-info.png"> and style via .apple-pie-icons .apple-pie-image { height: 1000px; }), or set the height of the image itself to 100% and then change the height of the parent, which is .apple-pie-icons in this case.
You also have this image (<img src="images/apple-pie.jpg" alt="Apple Pie" styling="width: 100%; height: 400px">) which has an inlinewidth and height style in the tag. It's worth noting that this image will not respond to height or width styles defined in your CSS since the inline styling will overwrite any other CSS.
It's possible that your image is growing the div even though you don't want it to in order to maintain it's aspect ratio. Try adding a more specific class to limit the images size or inspect in your browser to see what is overriding the divs styles.
Try targeting the image itself with the height style.
Right now you're just setting a height to the wrapping div:
.apple-pie-icons {
display: inline-block;
height: 100px;
float: left;
width: 80%;
}
Try...
.apple-pie-icons img {
height: 100px;
max-width: 100%;
}
or something like
.apple-pie-icons img {
height: 100%;
width: auto;
}
Any way to specifically target the image within the div that you're wanting to style.
So I have a class, let's call cont that will hold a lot of things, including an image.
Now I want to style the image. We can style an image inside a div with .cont using:
.cont>img {
...
}
However, in my cont div, I want another box to occupy 150px*150px, where the image is 'inside'. To clarify, I want to have a 150px*150px box, that holds an image that may be smaller:
[ ]
[ [ ] ]
[ [img] ]
[ [ ] ]
[ ]
Basically, in common css, this can be done like so:
.cont-image {
width:150px;
height:150px;
}
But that has the disadvantage of having to add the cont-image class to every image.
Is this possible to be inherited and styled automagically™? Somehow Like:
.cont>img {
width:150px;
height:150px;
}
(The above obviously doesn't work, because it stretches the image to the dimension, instead of having a 'wrapper' container.
Basically, I want to have an image have a preset size that it gets dropped into. This can be done like so:
<div style="width:150px;height:150px">
<img src=""></img>
</div>
So that I have a div that is 150*150 and the image with variable size is inside of it. However, I'm looking to do this through styling the image itself only (no outside div):
<img style="???" src=""></img>
Have you tried changing to max-width/height?
.cont>img {
max-width:150px;
max-height:150px;
}
There will be no stretching for image.
Are you looking for something like this: http://jsfiddle.net/abhitalks/pULZA/1/ ?
Using the same markup:
<div class="cont">
<img src="http://lorempixel.com/50/50" />
</div>
Try changing the size of the image in the fiddle. Try making it http://lorempixel.com/350/350. Hope that suits your purpose of capping the image size in the inner container.
Now for the CSS:
Using :after pseudo-class to generate a faux-container. It is actually not a container, but looks like one. This will help you to not change your existing markup.
.cont {
border: 1px solid gray;
width: 250px; height: 250px;
line-height: 250px;
position: relative;
text-align: center;
}
.cont > img {
border: 1px solid black;
display: inline-block;
max-width: 150px; max-height: 150px;
vertical-align: middle;
text-align: center;
}
.cont:after {
content: "";
display: block;
position: absolute;
top: 50px; left: 50px;
width: 150px; height: 150px;
border: 1px solid red;
background-color: #ddd;
z-index: -10;
}
Making the z-index negative, makes it go behind the image and thus appearing as if a container.
Otherwise, the only option you have is to change the markup to have nested divs.
Update:
Check this: http://jsfiddle.net/abhitalks/pULZA/2/
As you have said that you want the container to be fixed at 150px, you can use the half of that figure (75px) to calc and position the :after content accordingly. Thus even if the .cont dimensions change, the image and its frame will always remain in center.
Using CSS calc:
.cont:after {
...
/* to calculate center,
we halve the width to 75px and subtract it from 50% of parent
*/
top: calc(50% - 75px); left: calc(50% - 75px);
width: 150px; height: 150px;
...
}
HTML:
<div class="cont">
<div>
<img src="http://www.famfamfam.com/lab/icons/silk/icons/application_form.png" />
</div>
</div>
CSS:
.cont {
width: 150px;
height: 150px;
background-color: green;
padding: 25px;
}
.cont > div {
width: inherit;
height: inherit;
background-color: grey;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.cont img {
max-width: 150px;
max-height: 150px;
}
If I understood you correctly, this should work for you.
For example this div is displayed:
<div class="circle"></div
.circle {
width: 300px;
height: 300px;
background: red;
border-radius: 50%;
}
but when width and height are in % it collapses:
.circle {
width: 30%;
height: 30%;
background: red;
border-radius: 50%;
}
Is there a way to get it displayed?
This is because the div has no height. width: 30%; will always make the div 30% width of the parent (<body>, in this case), which is what you want. However, height behaves a little differently.
You need to specify a 100% height for body and html like so:
html,
body {
height: 100%;
}
Working Fiddle
You can read why height: 100%; behaves like that here
You need to declare a hard width/height somewhere, in this example I put a hard width/height on a container div:
http://jsfiddle.net/exrNm/1/
<div class="con">
<div class="circle"></div
</div>
.con{
width:300px;
height:300px
}
.circle {
width: 30%;
height: 30%;
background: red;
border-radius: 50%;
}
You could easily set a hard width somewhere up the parent chain. The % needs a hard value to calculate against.
SO,
I've created a four-column fluid-width layout for a site, and I'm working on placing a fluid square DIV within one of my columns. There are a few techniques I've found to achieve this - namely, setting padding-bottom to the same percentage as the width - but none of these seem to work when the DIV contains content.
Is there a way to maintain a 1:1 (square) ratio on a fluid DIV when that DIV contains content?
Here's my HTML:
<div id="leftmostcolumn">
<div id="logo"></div>
</div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="rightmostcolumn"></div>
And my CSS:
body {
width: 100%;
height: 100%;
background-color: red;
}
#leftmostcolumn {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
background-color: blue;
}
#leftcolumn {
position: absolute;
top: 0;
left: 25%;
width: 25%;
height: 100%;
background-color: green;
}
#rightcolumn {
position: absolute;
top: 0;
left: 50%;
width: 25%;
height: 100%;
background-color: yellow;
}
#rightmostcolumn {
position: absolute;
top: 0;
left: 75%;
width: 25%;
height: 100%;
background-color: gray;
}
#logo {
width:100%;
padding-bottom:100%;
background-color: #aa2d2d;
color: white;
}
And here's a JsFiddle.
The DIV "logo" is the one I'm trying to maintain as a square. Right now, I've used the padding-bottom approach but that doesn't do the trick when there's content in the DIV. Any input is greatly appreciated!
Marca
EDIT:
Getting there...I'm adapting a script I found to find the width of the DIV and then apply that value to the height to keep it a square. However, as it stands now the script doesn't constantly resize the DIV, and it won't allow it to shrink below a certain size. Any thoughts on how to correct either of these issues?
HTML:
<div id="box"></div>
CSS:
#box { width: 75%; height: 50px; background-color: black; }
JQUERY:
$("#box").css("height", function() {
return $(this).width();
});
JsFiddle is here.
This is something I've actually been messing around with for a while, and have come up with a quasi (but not entirely) hacky, CSS-only solution that seems to work on most browsers in the past decade. The trick is to use images, and positioning in a tricky fashion. Consider the following (simplification) of your code.
Markup:
<div class="sqr_box">
your content goes here!
</div>
CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
border: solid 2px pink;
background-color: grey;
color: white;
}
Now, we can't set the height in terms of percent, so we won't; instead, first we'll go into Photoshop, and make an image that is 2x2 px, transparent, or background-colored. Next we'll add the following to your markup:
<div class="sqr_box">
<img src="images/sizers/2x2.png" class="sizer">
<div class="content">your content goes here!</div>
</div>
and THIS to your CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
position: relative; /* static positioning is less than ideal for this scenario */
}
.sqr_box > img.sizer
{
display: block; /* images default to an inline-block like thing */
width: 100%;
height: auto; /* CLUTCH!!! this ensures that the image's height changes to maintain proportions with it's width */
visibility: hidden;
}
.sqr_box > .content
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Our parent element now has a dynamically assigned height, this will work */
border: solid 2px pink;
background-color: grey;
color: white;
}
Best of all, this will work for any sized ratio of box you'd want! Just change the proportions of the image!
Hope this is all still relevant to you, 3 months later.
-Sandy
Put all four columns in one div. set that div to 100% width and set the font size to 100em
Have each of your four columns have a width of 25em instead of 25%
Have your logo width and height set to 25em each
Is there a css-only solution to scale an image into a bounding box (keeping aspect-ratio)? This works if the image is bigger than the container:
img {
max-width: 100%;
max-height: 100%;
}
Example:
Use case 1 (works): http://jsfiddle.net/Jp5AQ/2/
Use case 2 (works): http://jsfiddle.net/Jp5AQ/3/
But I want to scale up the image until a dimension is 100% of the container.
Use case 3 (doesn't work): http://jsfiddle.net/Jp5AQ/4/
Thanks to CSS3 there is a solution !
The solution is to put the image as background-image and then set the background-size to contain.
HTML
<div class='bounding-box'>
</div>
CSS
.bounding-box {
background-image: url(...);
background-repeat: no-repeat;
background-size: contain;
}
Test it here: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
Full compatibility with latest browsers: http://caniuse.com/background-img-opts
To align the div in the center, you can use this variation:
.bounding-box {
background-image: url(...);
background-size: contain;
position: absolute;
background-position: center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
Note: Even though this is the accepted answer, the answer below is more accurate and is currently supported in all browsers if you have the option of using a background image.
Edit 2: In the modern age, using object-fit might be an even better solution: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
No, there is no CSS only way to do this in both directions. You could add
.fillwidth {
min-width: 100%;
height: auto;
}
To the an element to always have it 100% width and automatically scale the height to the aspect ratio, or the inverse:
.fillheight {
min-height: 100%;
width: auto;
}
to always scale to max height and relative width. To do both, you will need to determine if the aspect ratio is higher or lower than it's container, and CSS can't do this.
The reason is that CSS does not know what the page looks like. It sets rules beforehand, but only after that it is that the elements get rendered and you know exactly what sizes and ratios you're dealing with. The only way to detect that is with JavaScript.
Although you're not looking for a JS solution I'll add one anyway if someone might need it. The easiest way to handle this with JavaScript is to add a class based on the difference in ratio. If the width-to-height ratio of the box is greater than that of the image, add the class "fillwidth", else add the class "fillheight".
$('div').each(function() {
var fillClass = ($(this).height() > $(this).width())
? 'fillheight'
: 'fillwidth';
$(this).find('img').addClass(fillClass);
});
.fillwidth {
width: 100%;
height: auto;
}
.fillheight {
height: 100%;
width: auto;
}
div {
border: 1px solid black;
overflow: hidden;
}
.tower {
width: 100px;
height: 200px;
}
.trailer {
width: 200px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
<img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
<img src="http://placekitten.com/150/150" />
</div>
Here's a hackish solution I discovered:
#image {
max-width: 10%;
max-height: 10%;
transform: scale(10);
}
This will enlarge the image tenfold, but restrict it to 10% of its final size - thus bounding it to the container.
Unlike the background-image solution, this will also work with <video> elements.
Interactive example:
function step(timestamp) {
var container = document.getElementById('container');
timestamp /= 1000;
container.style.left = (200 + 100 * Math.sin(timestamp * 1.0)) + 'px';
container.style.top = (200 + 100 * Math.sin(timestamp * 1.1)) + 'px';
container.style.width = (500 + 500 * Math.sin(timestamp * 1.2)) + 'px';
container.style.height = (500 + 500 * Math.sin(timestamp * 1.3)) + 'px';
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
#container {
outline: 1px solid black;
position: relative;
background-color: red;
}
#image {
display: block;
max-width: 10%;
max-height: 10%;
transform-origin: 0 0;
transform: scale(10);
}
<div id="container">
<img id="image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png">
</div>
Today, just say object-fit: contain. Support is everything but IE: http://caniuse.com/#feat=object-fit
html:
<div class="container">
<img class="flowerImg" src="flower.jpg">
</div>
css:
.container{
width: 100px;
height: 100px;
}
.flowerImg{
width: 100px;
height: 100px;
object-fit: cover;
/*object-fit: contain;
object-fit: scale-down;
object-position: -10% 0;
object-fit: none;
object-fit: fill;*/
}
You can accomplish this with pure CSS and complete browser support, both for vertically-long and horizontally-long images at the same time.
Here's a snippet which works in Chrome, Firefox, and Safari (both using object-fit: scale-down, and without using it):
figure {
margin: 0;
}
.container {
display: table-cell;
vertical-align: middle;
width: 80px;
height: 80px;
border: 1px solid #aaa;
}
.container_image {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
.container2_image2 {
width: 80px;
height: 80px;
object-fit: scale-down;
border: 1px solid #aaa;
}
Without `object-fit: scale-down`:
<br>
<br>
<figure class="container">
<img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>
<br>
<figure class="container">
<img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>
<br> Using `object-fit: scale-down`:
<br>
<br>
<figure>
<img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>
<br>
<figure>
<img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>
Another solution without background image and without the need for a container (though the max sizes of the bounding box must be known):
img{
max-height: 100px;
max-width: 100px;
width: auto; /* These two are added only for clarity, */
height: auto; /* as the default is auto anyway */
}
If a container's use is required, then the max-width and max-height can be set to 100%:
img {
max-height: 100%;
max-width: 100%;
width: auto; /* These two are added only for clarity, */
height: auto; /* as the default is auto anyway */
}
div.container {
width: 100px;
height: 100px;
}
For this you would have something like:
<table>
<tr>
<td>Lorem</td>
<td>Ipsum<br />dolor</td>
<td>
<div class="container"><img src="image5.png" /></div>
</td>
</tr>
</table>
This example to stretch the image proportionally to fit the entire window.
An improvisation to the above correct code is to add $( window ).resize(function(){});
function stretchImg(){
$('div').each(function() {
($(this).height() > $(this).find('img').height())
? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
: '';
($(this).width() > $(this).find('img').width())
? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
: '';
});
}
stretchImg();
$( window ).resize(function() {
strechImg();
});
There are two if conditions. The first one keeps checking if the image height is less than the div and applies .fillheight class while the next checks for width and applies .fillwidth class.
In both cases the other class is removed using .removeClass()
Here is the CSS
.fillwidth {
width: 100%;
max-width: none;
height: auto;
}
.fillheight {
height: 100vh;
max-width: none;
width: auto;
}
You can replace 100vh by 100% if you want to stretch the image with in a div. This example to stretch the image proportionally to fit the entire window.
Are you looking to scale upwards but not downwards?
div {
border: solid 1px green;
width: 60px;
height: 70px;
}
div img {
width: 100%;
height: 100%;
min-height: 500px;
min-width: 500px;
outline: solid 1px red;
}
This however, does not lock aspect-ratio.
I have used table to center image inside the box. It keeps aspect ratio and scales image in a way that is totally inside the box. If the image is smaller than the box then it is shown as it is in the center. Below code uses 40px width and 40px height box. (Not quite sure how well it works because I removed it from another more complex code and simplified it little bit)
.SmallThumbnailContainer {
display: inline-block;
position: relative;
float: left;
width: 40px;
height: 40px;
border: 1px solid #ccc;
margin: 0px;
padding: 0px;
}
.SmallThumbnailContainer {
width: 40px;
margin: 0px 10px 0px 0px;
}
.SmallThumbnailContainer tr {
height: 40px;
text-align: center;
}
.SmallThumbnailContainer tr td {
vertical-align: middle;
position: relative;
width: 40px;
}
.SmallThumbnailContainer tr td img {
overflow: hidden;
max-height: 40px;
max-width: 40px;
vertical-align: middle;
margin: -1px -1px 1px -1px;
}
<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="https://www.gravatar.com/avatar/bf7d39f4ed9c289feca7de38a0093250?s=32&d=identicon&r=PG" width="32" height="32" alt="OP's SO avatar image used as a sample jpg because it is hosted on SO, thus always available" />
</td>
</tr>
</table>
Note: the native thumbnail size in this snippet is 32px x 32px, which is smaller than its 40px x 40px container. If the container is instead sized smaller than the thumbnail in any dimension, say 40px x 20px, the image flows outside the container in the dimensions that are smaller than the corresponding image dimension. The container is marked by a gray 1px border.
Use Object Fit on both div and img to scale image
<div class="box"><img src="image.jpg"></div>
.box {height: auto;
object-fit: cover;}
img { height: 100%; object-fit: cover; }
This worked for my needs, doesn't flatten out the image while setting height limitation, it overflows instead.
.top-container{
width:50%;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
height: 40vh;
width: 100%;
overflow: hidden;
}
.img-container img {
max-width: 10%;
max-height: auto;
transform: scale(10);
}
<div class='top-container'>
<div class='img-container'>
<img src='image.jpg'>
</div>
</div>
First some CSS:
div.image-wrapper {
height: 230px; /* Suggestive number; pick your own height as desired */
position: relative;
overflow: hidden; /* This will do the magic */
width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
width: 100%;
position: absolute;
left: 0;
top: 0;
height: auto;
}
The HTML:
<div class="image-wrapper">
<img src="yourSource.jpg">
</div>
.img-class {
width: <img width>;
height: <img height>;
content: url('/path/to/img.png');
}
Then on the element (you can use javascript or media queries to add responsiveness):
<div class='img-class' style='transform: scale(X);'></div>
.boundingbox {
width: 400px;
height: 500px;
border: 2px solid #F63;
}
img{
width:400px;
max-height: 500px;
height:auto;
}
With the styles set as shown above in css, now the following html div will show the image always fit width wise and will adjust hight aspect ratio to width. Thus image will scale to fit a bounding box as asked in the question.
<div class="boundingbox"><img src="image.jpg"/></div>