How to make parent div width shrink to wrap exactly the child imgs?

How to make parent div width shrink to wrap exactly the child imgs?

Jsfiddle here: http://jsfiddle.net/zxJbV/

<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>

There may be many <img>s and newlines. The parent div always expand to the 100% width and can't wrap the images exactly. The result I got now(with spacing on the right): The result I want is like:


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

How to make parent div width shrink to wrap exactly the child imgs?, The parent div always expand to the 100% width and can't wrap the images exactly. The result I got now(with spacing on the right): enter image description here How to make parent div width shrink to wrap exactly the child imgs? expand to the 100% width and can't wrap the images exactly. child divs to parent div


Firstly, normalise your css.

Second, display: inline-block; on the images, and display: block; on the container.

http://jsfiddle.net/jshado1/zxJbV/7/

Full Width Containers in Limited Width Parents, The issue is: how do we make a full-browser-width container when we're We want to stretch it exactly as wide as the browser window. But margin is calculated based on the parent element, so to pull it to the left might also do something like .full-width img { width: 100%; } too, to get that full coverage. Auto resize an image (img) to fit into a smaller Div can be achieved through simple CSS or CSS3. In this tutorial I will explain both CSS and CSS3 ways using simple html example.Add max-width,max-height CSS as 100% for img tag,then image will be auto resized.Use CSS3 object-fit:contain to resize img to fit into div.


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.

width, In the example above, elements that have a class name of .wrap will be 80% on the element's parent, or in other words, the width of the containing block. <​figure> <img src="/images/kitten.jpg" alt="" /> <figcaption>What a lovely because float will exhibit that same kind of shrink-to-fit behavior, but what  Shrink-to-fit block elements. HTML & CSS It will exhibit table behavior then and auto-size it's width according to any child with a fixed width, the image. this demo set the width of the


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;
}

.

JSFiddle Demo

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();

JSFiddle Demo no jQuery

Parent div width of child, I have a parent div to width 400px; then it has an inner div with the width that I want to target an img-class with "100vw" to always stretch to the viewport the parent takes 100% of the screen width and does not shrink to the width of the child. Aug 07, 2018 · In terms of the structure, wrap two div elements (children) in a  You have a div container and a child element. The child div has a width of 400px but the parent has no width declared. Again, if you add a border, it can happen that the parent div is expanded to 100% while the child div is only 400px. You however may want it to be as wide as the child element – 400px (plus any paddings or margins declared).


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 :)

Confining child divs to auto width of parent div -- HOW?, I'm trying to do something very simple, but for the life of me cannot figure out how 0 0 1rem 1rem;"> <img src="photo.jpg" alt="photo"> <div>Long hoto to the width of the photo in the parent div and wrap the text accordingly. The flex-wrap property specifies whether the flexible items should wrap or not. Note: If the elements are not flexible items, the flex-wrap property has no effect. The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.


Tribute Page, responsively resize img relative to parent element , If I apply it to #image then I lose my nice and centred layout and still get the error! The original images width is 625px so I've specified max-width:  Width by CSS-Tricks (@css-tricks) on CodePen. Digging Deeper. When using percentage (%) for width, authors must be aware that the percentage is based on the element’s parent, or in other words, the width of the containing block. If your parent is set at 480px – as demonstrated by our demo – then the percentage is based on that value.


The Ultimate Guide to Flexbox, And that's exactly what we're going to do in this article. 10 images with their width and height declarations intact. If you remember the last example, flex-​wrap will allow for the happens when the child elements cannot fit into the parent element. This will set the flex-grow and flex-shrink values to 0 . About once a week on Stack Overflow, I see the exactly same question asked. It’s always has the same answer, but the question is asked in many different ways… Pictures always help, so here’s


CSS: centering things, The 'left' rule reduces the available width for the element by 50%. The renderer will thus try to make lines that are no longer than half the width of the container. By  A component's height and width determine its size on the screen. The simplest way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels. Setting dimensions this way is common for components that should always render at exactly