CSS Scale an Element with 100% Width

CSS Scale an element with 100% width

To emulate what the zoom property does in this case, you can add -transform-origin: 0 0; and set the width to oldWidth / newScale (100 / 0.7 ~= 142.857143):

http://jsfiddle.net/thirtydot/Fz7qh/5/

div.zoomed {
    -webkit-transform: scale(.7);
    -webkit-transform-origin: 0 0;
    width: 142.857143%;
}​

Unable to scale element to 100% width

HTML actually has basic CSS already "built in" to it. If you create an index.html, and only have <h1>hello there</h1>, you'll see it's big and bold. There's also default margins, which is probably what you're experiencing.

You can do mazunki's answer of setting margin to 0,

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    min-height: 100%;
}

This resets all your junk to have 0 margin, but something I like to include when working in CSS is a reset.css file. What this file does is resets all the basic HTML styling, so you never have to deal with it in the future of working on your project.

You can slap this bad-boy at the beginning of your css file, or make a separate reset.css file. If you make its own file, be sure to import it before your actual css file in your html.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

Good luck!

How to make div scale to 100% of browser width?

You can do this with simple CSS:

#sidebar {
    float: left;
    width: 100px;
}

#content {
    margin-left: 100px;
}

Updated with wrapper div:

HTML

<div id="wrapper">
    <p>wrapper</p>
    <div id="sidebar">sidebar</div>
    <div id="content">content</div>
    <p>wrapper</p>
</div>

CSS

* {
    /* reset */
    margin: 0;
    padding: 0;
}
html,
body {
    /* for demo purposes only */
    height: 100%;
}
#wrapper {
    /* for demo purposes only */
    background: rgba(200, 200, 200, 0.6);
    height: 100%;
}
#sidebar {
    float: left;
    width: 100px;

    /* for demo purposes only */
    background: rgba(200, 200, 200, 0.6);
    height: 50%;
}
#content {
    margin-left: 100px;

    /* for demo purposes only */
    background: rgba(200, 200, 200, 0.9);
    height: 50%;
}

Working example: http://jsfiddle.net/kboucher/FK2tL/

CSS - Set Div Width 100% and Resize Keeping Aspect Ratio

To make an element maintain proportions you only have to use this code

<div id="some_div"></div>

#some_div:after{
    content: "";
    display: block;
    padding-top: 100%; /* the percentage of y over x  */
}

So this is how to achieve it. Demo

<div id="wrapper">
    <div id="bg_img"></div>
</div>
<div class="clearfix"></div> 

N.B. clearfix isn't required for this solution, OP had it in his code.

CSS

#wrapper{
    position: relative;
    width: 100%;
}
#wrapper:after{
    content: "";
    display: block;
    padding-top: 27.06666%; /* 406 over 1500  */
}
#bg_img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(http://placekitten.com/1500/406);
    background-size: 100% 100%;
}

Table 100% width and height, and image to scale proportionally with css

if image is set in absolute position , html table or flex box would do the job:

• table

html,body,table {  height: 100%;  width: 100%;  margin: 0;  background-color: rgb(148, 0, 211);  text-align: center;  /* for table */  table-layout: fixed;  border-collapse: collapse;}
td {  padding: 10px;}
td.hide {/* do not remove or remove/update also colspan attribute else where */  width: 0;  padding:0;  overflow: hidden;}
img {  display: block;/* for the gap*/  margin: auto;}
.header_image {  height: 100px;/* your example */}
thead tr td,tfoot tr td {  height: 0;/* no worry it will expand */}
tbody {  position: relative;  /* also uses height left avalaible */}
.main_image {  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  max-height: 100%;  max-width: 100%;}
.text {  font-size: 50px;  font-family: sans-serif;  letter-spacing: -4px;  margin: 0 20px;}

<table>  <thead>    <tr>      <td class="hide"><img class="header_image" src="https://dummyimage.com/400" /></td>      <td><img class="header_image" src="https://dummyimage.com/2254x1860" /></td>    </tr>  </thead>  <tfoot>    <tr>      <td colspan="2"> <span class="text">some text</span></td>    </tr>  </tfoot>  <tbody>    <tr>      <td colspan="2">        <img class="main_image" src="https://dummyimage.com/1600">      </td>    </tr>  </tbody></table>

Scale up image until either height or width is 100%

The object-fit property will do this if you set it to contain (if you set it to fill it will become distorted if the aspect ratio of the container and the img are not the same).

Here's a simple example, change the viewport dimensions to see the affect on the image:

.container {
  width: 50vw;
  height: 50vh;
  background: gray;
}
.container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="container">
  <img src="https://picsum.photos/id/1015/768/1024"/>
</div>

How can I expand a child div to 100% screen width if the container div is smaller?

You can set the width based on the vw (viewport width). You can use that value too using the calc function, to calculate a left-margin for the div. This way you can position it inside the flow, but still sticking out on the left and right side of the centered fixed-width div.

Support is pretty good. vw is supported by all major browsers, including IE9+. The same goes for calc(). If you need to support IE8 or Opera Mini, you're out of luck with this method.

-edit-

As mentioned in the comments, when the content of the page is higher than the screen, this will result in a horizontal scrollbar. You can suppress that scrollbar using body {overflow-x: hidden;}. It would be nice though to solve it in a different way, but a solution using left and rightlike presented in Width:100% without scrollbars doesn't work in this situation.

-edit 2021-

Another work-around for the scrollbars, which may be acceptable or not depending on your situation:

By making the green div a little bit smaller, say 20px, you can keep a bit of space for the scrollbar. Half that reserved width can be added to the margin, to keep the wide div centered:

#wide-div {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);

div {
  min-height: 40px;
  box-sizing: border-box;
}
#container {
  position: relative;
}
#parent {
  width: 400px;
  border: 1px solid black;
  margin: 0 auto;
}

#something {
  border: 2px solid red;
}

#wide-div {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);
  border: 2px solid green;
}

<div id="container">
<div id="parent">
  <div id="something">Red</div>
  <div id="wide-div">Green

<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
</div>
  <div id="something-else">Other content, which is not behind Green as you can see.</div>
</div>
</div>

Div doesn't scale to 100% of parent but to 100% of viewport

There are a couple of things wrong with your code, starting from formatting and ending with simulating tables using divs when there really is no need for such.

To answer your question, child elements can reference the height of a parent element as long as the height of the parent element is available when the child element tries to use it. Since the parent element's height is not explicitly defined, it is calculated after laying out all child elements, including the image, and as such, it is not available when the image needs to use it.

Here are a couple of things you can look into:

• use CSS3 flexbox to lay out the image and the #tablecontainer. You can find a quick tutorial for it here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• use position: absolute on the image and position: relative on the #container. Absolutely positioning an element removes it from the regular layout flow and allows you to use the parent's calculated height. You will also need to add additional padding on the left side of the #tablecontainer, should you choose to go this route (since the image will be tehnically overlayed).
• set the image as a background for the #container and use background-size: contain and background-position to adjust it's location. As above, you will need to add additional padding on the left side of the #tablecontainer. One way you can do this is set padding-left.

How to make an element width: 100% minus padding?

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.

---

Related Topics