CODEWITHSUNDEEP
htmlcss
livin_amuk
livin_amuk

Reputation: 1353

Shrink an image to fill the remaining space in the page horizontally

I have two divs positioned side by side horizontally. The width of the first is determined by the text within it, and I simply want to shrink an image in the second div so that its width fills the remaining horizontal space on the page.

+--------------------------------------------+
|           |                                |
|           |                                |
|           |                                |
|           |                                |
|           |                                |
|  <div 1>  |            <div 2>             |
| Some text |          Large image           |
|           |                                |
|           |                                |
|           |                                |
|           |                                |
|           |                                |
+--------------------------------------------+
            <---------remaining-space-------->
<---------------- page width ---------------->

Currently, I'm shrinking the image to the page width, but what I really need is to shrink to the page width minus the width of the text div.

I'm after a CSS solution with IE compatibly and without hard-coded fixed widths.

#text
{
  background-color: black;
  color: white;
  float: left;
}

img
{
  position: absolute;
  max-width: 100%;  
}
<div id=text>Some text</div>
<img src="http://www.principiaprogrammatica.com/image.jpg"/>

Upvotes: 1

Views: 2923

Answers (4)

Manas Acharyya
Manas Acharyya

Reputation: 42

set a parent div tag to the image #div2>img and then set its max-width to 100%

Upvotes: 0

George E. Kallergis
George E. Kallergis

Reputation: 108

You could try this:

https://fiddle.jshell.net/qbgnp1ar/2/

<div class="container">
    <div class="text">Some text</div>
    <div class="image"><img src="http://www.principiaprogrammatica.com/image.jpg"/></div>
</div>

.container {
    width:100%;
}
.image {
    overflow:hidden;
}

.image > img {
  width: 100%
}

.text {
    background:blue;
    float:left;
}

And here are some extra info on this: http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/ a Hope it helps! :)

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122037

You can try flexbox and it should work in IE 11+

DEMO

.content {
  display: -webkit-flex;
  display: flex;
  min-height: 100vh;
}

.image {
  -webkit-flex: 1; 
  flex: 1;
}

.image img {
  width: 100%;
}

<div class="content">
  <div id=text>Some text</div>
  <div class="image">
    <img src="http://www.principiaprogrammatica.com/image.jpg" alt="">
  </div>
</div>

Upvotes: 1

Nasco.Chachev
Nasco.Chachev

Reputation: 676

HTML: 

<div id="text">Some text</div>
    <div class="aPicture">
    <img src="http://www.principiaprogrammatica.com/image.jpg"/>
    </div>

CSS:

#text
{
  background-color: black;
  color: white;
  float: left;
  width:15%;
}
.aPicture{
    float:right;
    width:85%;
}
img
{
  max-width: 100%;
  height:auto;  
}

Upvotes: 0

Related Questions