Css: Auto Resize Div to Fit Container Width

CSS: Auto resize div to fit container width

You can overflow:hidden to your #content. Write like this:

#content
{
    min-width:700px;
    margin-left:10px;
    overflow:hidden;
    background-color:AppWorkspace;
}

Check this http://jsfiddle.net/Zvt2j/1/

How do I auto-resize an image to fit a 'div' container?

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%;
max-height:100%;

Also, height: auto; if you want to specify a width only.

Example: http://jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

How to automate the width of three divs to fit in container?

You can apply these settings to your three DIVs.

.my_div {
  width: 33%;
  max-width: 200px;
}

This will make sure the three DIVs always fit into the container (33% width), but will never get wider than 200px each, also if the container is much wider than 600px.

How to make div element auto-resize maintaining aspect ratio?

The aspect-ratio ^ref property has a good support now so you can use the below:

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.stage {
  --r: 960 / 540;

  aspect-ratio: var(--r);
  width:min(90%, min(960px, 90vh*(var(--r))));
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  
  background: 
    /* this gradient is a proof that the ratio is maintained since the angle is fixed */
    linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

<div class="stage">
  <p>Some text</p>
</div>

Make div auto resize to fit its container height

You can try this:

.left {
    width: 200px;
    overflow: auto;
    background-color: blue;
    position:absolute;
    top:140px;
    left:0;
    bottom:0;
}

.right {
    width: 300px;
    min-height: 260px;
    overflow: auto;
    background-color: green;
    margin-left:200px;
}

demonstration

Hope I understood the question corectly - now works fine, if you try changing content height.

How do I auto-resize an image to fit a div container

@troy-wu, what do you think of this?

Try adjusting the viewport width here! https://jsfiddle.net/rickydam/ob4umwp3/

.one {  width: 70%;  background-color: lightgray;  display: inline-block;}
.two {  width: 30%;  background-color: gray;  display: inline-block;  margin-left: -5px;}
img {  max-height: 20vw;  display: inline-block;}

<div class="one">  <img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"></div>
<div class="two">  <img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"></div>

html, css automatically resize/adjust width to fit content

See the solution.

.message-container {
  resize: both;
  margin: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  color: #ffffff;
  border-radius: 20px;
  min-width: 100px;
  max-width: 400px;
  width: auto;
  height: auto;
  background-color: #80CBC4;
}

.message-value {
  resize: both;
  float: left;
  max-width: 380px;
  word-wrap: break-word;
  height: auto;
  display: inline;
}

.message-attribute {
  padding-left: 50px;
  width: 150px;
  display: inline;
  color: #607D8B;
}

https://jsfiddle.net/Lwrpegqe/2/

How can I let a div automatically set it own width?

Solution with inline-block

You could try display: inline-block and see if that works in your situation. However, you won't be able to center it using margin-left: auto & margin-right: auto because that technique requires a width value.

If possible, use display: inline-block and set text-align: center on it's container.

<div style="text-align: center">
  <div style="display: inline-block;">
     This will expand only as far as it needs to
  </div>
</div>

Solution using Flexbox + container div

The original answer above was written in 2011, before flexbox was implemented. You can achieve a similar effect

<div style="display: flex; justify-content: center;">
  <div>
     This will expand only as far as it needs to
  </div>
</div>

Solution without container div

There is another way to do this without a parent element.

1. Set display to inline-block to make the div width fit to its content.
2. Use position: relative and left: 50% to position its left edge to 50% of its containing element.
3. Use transform: translateX(-50%) which will "shift" the element to the left by half its own width.

.center {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

How to get a div to resize its height to fit container?

Simple Way

You can achieve this with setting both the top and bottom attributes of the nav to 0 and the position: absolute. Set the container to position: relative.

See how this is done

Modern Way (Flexbox)

IE11+ and all modern browsers support flexbox.

.container {
  display: flex;
  flex-direction: column;
}

.child {
  flex-grow: 1;
}

Resize div to fit screen

You could use CSS flex for this.

It could look something like this:

body,html{            margin: 0;            padding: 0;        }        #container{            position: absolute;            width:100%;            height: 100%;            display:flex;            flex-direction: column;        }        .img{            background: blue;            width: 100%;            height: 50%;            vertical-align: top;            }

<div id = 'container'>    <p>Text 1</p>    <div class="img"></div>    <div class="img"></div>    <p>Text 2</p></div>

---

Related Topics