I'm trying to figure out a way of making the image div having and keeping an aspect ratio of 3:2 with different web browser sizes (for mobile responsiveness etc). I want to be able to re-size my browser window and the image to always have a 3:2, so I want the image height to also re-size.
Is there any way of achieving this with my current code? I'd also like to be able to make the blue text div smaller without having to make the image above bigger, because if I reduce the height percentage of the blue div, I'll have to increase the picture div above to make up the 100% parent element's height, but this will throw the aspect ratio of the picture div out.
I'm not sure how to achieve this as it's more confusing than I thought.
Appreciate any help, thanks...
#bg {
width: 100%;
height: 300px;
background: yellow;
}
#window-container {
width: 30%;
height: 200px;
background: orange;
}
#img {
background: url('http://www.livescience.com/images/i/000/036/988/original/elephants.jpg');
height: 67%;
width: 100%;
background-size: cover;
background-position: center;
}
#text-wrap {
background: lightblue;
width: 100%;
height: 33%;
}
<div id="bg">
<div id='window-container'>
<div id='img'></div>
<div id='text-wrap'>text here</div>
</div>
</div>
May this be what you want?
#bg {
width: 100%;
background: yellow;
display: table;
}
#window-container {
width: 30%;
background: orange;
display: block;
}
img {
width: 100%;
height: auto;
}
#text-wrap {
background: lightblue;
padding: 10px;
}
<div id="bg">
<div id='window-container'>
<img src="https://www.livescience.com/images/i/000/036/988/original/elephants.jpg" alt="">
<div id='text-wrap'>text here</div>
</div>
</div>
You can do it with the img element and Flexbox:
#bg {
background: yellow;
}
#window-container {
display: inline-flex; /* only takes the contents width */
flex-direction: column; /* stacks children vertically */
background: orange;
}
#text-wrap {
background: lightblue;
}
img {
display: block; /* removes bottom margin/whitespace */
/*height: 66.66%; more accurate, needs to be commented out in order to work in Chrome, in FF it works perfectly, so the solution is to use properly cropped (3:2 ratio) locally stored images, luckily that's not the case with the current image*/
max-width: 100%; /* horizontal responsiveness */
max-height: 100vh; /* vertical responsiveness */
}
<div id="bg">
<div id='window-container'>
<img src="http://www.livescience.com/images/i/000/036/988/original/elephants.jpg" alt="">
<div id='text-wrap'>text here</div>
</div>
</div>
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>
I'm having some strange behavior of the percentages.
I have layout which is 1366 pixels wide and I have one div which should be fluid.
Its 200px wide, which means it should be 14.64% wide.
When the layout is tested in 1366 pixels the div looks fine and there are no problems, but when I expand to 1920 the div is not wide enough.
Here is some samples of the code:
HTML:
<header>
<div class="top-bar">
<div class="fill"></div>
<div class="container">
<nav>
</nav>
</div>
</div>
<div class="bottom-bar">
</div>
</header>
And CSS
.container{
width: 1004px;
margin: 0px auto 0px auto;
}
header{
width: 100%;
height: 95px;
}
header div.top-bar{
background: #ffffff;
width: 100%;
height: 50px;
}
header div.fill{
background: #000000;
width: 14.64%;
height: 50px;
float: left;
}
nav{
height: 50px;
float: left;
}
header.main div.bottom-bar{
background: url("header-bottom.png") repeat-x;
width: 100%;
height: 45px;
}
I've coded liquid designs before, but never had problem like this, maybe my math is wrong or the problem is that everything else is hardcoded in pixels and this is liquid?
I'd guess the problem is because container has a pixel size while fill is in percentage. If all you want to achieve with the fill is to put a background color around container, you can do something like this (and remove the fill class css)
.container{
width: 1004px;
margin: 0px auto 0px auto;
background: #ffffff;
}
header div.top-bar{
width: 100%;
height: 50px;
background: #000000;
}
Now if you want to color only left side, and want to fit your 'fill' div nicely, then both container and fill have be either in percentage or in pixels (won't work properly in different screen sizes). There are different workarounds to make your fill work e.g. the following
header div.fill {
background: #000000;
width: 50%; /*make it wide enough*/
height: 50px;
float: left;
z-index: -1; /*put it behind container*/
position: relative;
}
header div.top-bar{
background: #ffffff;
width: 100%;
height: 50px;
z-index: -2; /*put it behind all*/
position: relative;
}
for managment layout use grid system css famework for example
Bootstrap
http://getbootstrap.com/
or
960 grid system
http://960.gs/
I have a header image that stopped resizing after I placed it in a CSS wrapper. I specified the width of the wrapper, b/c I want the navigation to the right to be directly above the white space area below - flushed to the right.
How can I set the width of the wrapper in which I place an image but maintain the responsiveness (image responds to resizing)?
HERE's the URL; http://www.insidemarketblog.com/
Here's the code:
HTML
<div id="header">
<div class="wrap">
<span class="menu_control">≡ Menu</span>
<ul class="nav"><li class="page_item page-item-35">ABOUT US</li></ul>
<h1 id="site_title"><a href="http://www.insidemarketblog.com"><img id="thesis_logo_image" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/logo_header1.png" alt="Inside Market Strategy" width="400" height="87" title="click to go home" />
</a></h1>
</div>
</div>
CSS:
.wrap {
width: 1000px;
margin: 0 auto;
border: 1px solid #000;
position: relative;
}
You need to make the image flex too:
img {
display: block;
width: 100%;
height: auto;
}
I believe you have two issues here:
1st, Your .wrap is 1000px in width. please make it 100%
2nd, your img css should have a max-width: 400px; and width:100%
This way you will have your img exactly the way you want it.
Here is the css:
.wrap {
width: 100%;
margin: 0 auto;
border: 1px solid #000;
position: relative;
}
img {
width: 100%;
max-width: 400px;
height: auto;
}
See it in Action: http://jsfiddle.net/salota8550/59LKP/
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>