How To Make Parent Div Width Shrink To Wrap Exactly The Child Imgs?
Solution 1:
There's no easy way of doing this with CSS alone. You'll have to write a bunch media queries to suit every width the container will have - depending on how many items/columns there are in your container.
That being said, I once wrote some LESS code which generates the media queries.
FIDDLE or CODEPEN (Supports LESS)
Here's how to take advantage of LESS to set up the media queries:
Set up an iteration mixin like this: (You can paste this code into http://less2css.org)
@item-width:100px;
@item-height:100px;
@margin: 5px;
@min-cols:2;
@max-cols:12; //set an upper limit of how may columns you want to write the media queries for
.loopingClass (@index-width) when (@index-width <= @item-width * @max-cols) {
@media (min-width:@index-width) {
#content{
width: @index-width;
}
}
.loopingClass(@index-width + @item-width);
}
.loopingClass (@item-width * @min-cols);
The above mixin will spit out a series of media queries in the form:
@media (min-width: 200px) {
#content {
width: 200px;
}
}
@media (min-width: 300px) {
#content {
width: 300px;
}
}
@media (min-width: 400px) {
#content {
width: 400px;
}
}
...
@media (min-width: 1200px) {
#content {
width: 1200px;
}
}
So with a simple markup like:
<ul id="content">
<li class="box"></li>
<li class="box"></li>
...
<li class="box"></li>
</ul>
With remaining CSS (LESS):
#content {
margin:0 auto;
overflow: auto;
min-width: @min-cols * @item-width;
max-width: @max-cols * @item-width;
display: block;
list-style:none;
background: aqua;
}
.box {
float: left;
height: @item-height - 2 *@margin;
width: @item-width - 2*@margin;
margin:@margin;
background-color:blue;
}
... you get the desired result.
...and it's super easy to customize the layout:
All I need to do is change the variables that I used in the LESS mixin according to my needs - I get the exact layout that I'm after.
So let's say I have items 300px X 100px with a minimum of 2 columns and max 6 columns and a margin of 15px - I just modify the variables like so:
@item-width:300px;
@item-height:100px;
@margin: 15px;
@min-cols:2;
@max-cols:6;
...and voila, I get this CODEPEN
Solution 2:
I understood your problem, try this code
<div class="container" style="border:1px solid black;width:70px;padding:5px;">
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
</div>
The above code contains 1 image per line because i have set the width to 70px, depending on the number of image you want per line please set the width, for example 3 images per line (3x60px = 180px + 10px for the padding). Hope it works. Have a nice day.
Solution 3:
A little jQuery will help you:
Javascript:
var IMG_WIDTH = 60; // Define your minimum image width here.
$(function() {
$(window).resize(function() {
// $('#debug').html($('.container').width());
var width = $('.container').width();
if (width % IMG_WIDTH != 0) {
$('.container img').css({
width: width / Math.floor(width / 60),
height: width / Math.floor(width / 60)
});
}
}).resize();
});
CSS:
img {
float: left;
margin: 0;
}
.
Non-jQuery solution
var IMG_WIDTH = 60;
window.onresize = function() {
var width = document.getElementById('container').offsetWidth;
if (width % IMG_WIDTH != 0) {
var imgElements = document.querySelectorAll('#container img');
Array.prototype.forEach.call(imgElements, function(el, i){
el.style.width = width / Math.floor(width / 60) + 'px';
el.style.height = width / Math.floor(width / 60) + 'px';
});
}
};
window.onresize();
Solution 4:
You can do this easily using flexbox and not suffer that much. The code will look like this:
index.html
<div class="container" style="border:1px solid black;text-align:left">
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
</div>
main.css
.container {
display: flex;
flex-flow: row wrap;
}
.container img {
flex: 1;
}
working pen: https://codepen.io/pen/?editors=0100;
Hope helps :)
Solution 5:
.main {
border: 10px solid red;
padding:10px;
display: flex;
flex-flow: wrap;
background-color:yellow!important;
}
.main div {
flex-grow: 1;
border: 1px solid black;
}
.main div.nogrow{
flex-grow: 0;
}<div class="main" >
<div class="nogrow" style="background-color:coral;">dsfddsfdfA</div>
<div class="nogrow" style="background-color:lightblue;">dfdfdfdB</div>
<div class="nogrow" style="background-color:khaki;">dfdfdf d fd fdC</div>
<div class="nogrow" style="background-color:pink;">Ddssd sdf sdf</div>
<div class="nogrow" style="background-color:lightgrey;"> df df df ddf dfE</div>
<div class="nogrow" style="background-color:lightgreen;"> dfd fd df dfdF</div>
</div>@TrungDQ thanks for your support. I have a similar issue, but width is dynamic, and Do not want empty spaces at the right side. Could you kindly take a look? https://jsfiddle.net/phyle5/07pwdy12/ Please resize and see.
Post a Comment for "How To Make Parent Div Width Shrink To Wrap Exactly The Child Imgs?"