• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1374
  • Last Modified:

How to make images within a container div scale with the div in a fluid layout

Hello,

I have a fluid page with 3 column divs, they are fluid (30%) of page width which is also fluid with a minimum size of 1024px.

I'm just trying, and failing miserably, to get the images to scale with the divs both up and down as the window is resized. The images are 700px wide so I want to make that themaximum the columns can scale too also if possible so the overall page never exceeds about 2140px or so.

I am using this withing a POD (PODS CMS) in wordpress. So the images are each callled through a PODS template which is below. IT won't let me apply the style directly onto the image so I am trying to add it as a wrapper div, I think this may be my problem here??


Can anyone suggest the best method for this please?

Cheers :)


This is what I have so far (the divs scale well with the their text content, the images are just full size and cut off):


/* CONTAINER DIV */

#profileBoxes{width:100%;min-width:1020px;margin:70px auto;height:auto;overflow: hidden;}



/* COLUMNS */

#profileLeft{width:31%;max-width:700px;height:auto;float:left;overflow:hidden;}

#profileMiddle{width:31%;max-width:700px;height:auto;float:left;margin-left:3%;display:inline;overflow:hidden;}

#profileRight{width:31%;max-width:700px;height:auto;float:left;margin-left:3%;display:inline;overflow:hidden;}


/* IMAGE CLASS*/

.profileImg {float:left;height:auto;max-width:100%;position: relative;overflow:hidden;}



/*PODS TEMPLATE */

<div class="profileImg" ">
<?php
foreach ($this->get_field('image') as $image) {
  echo "<img src=\"{$image['guid']}\" />";
}
?>
</div>
<div class="profileText">{@text}</div>
0
igloobob
Asked:
igloobob
  • 4
  • 2
1 Solution
 
Kyle HamiltonData ScientistCommented:
The max-width has to applied to the image. You can do this:

.profileImg img{
max-width:100%:
}

This will target images inside the prifileImg div.

However, what do you mean it won't allow you to access the image?

What you should really do is get rid of the wrapper div and add a class to the image that is being generated from the template. Then apply the max-width to that class.
0
 
igloobobAuthor Commented:
D'oh of course! Thanks kozaiwaniec, sometimes I just get too close to something and miss the obvious!

It is in the code for the PODS template I cannot apply a class to the image code as I would normally as it causes errors. I would imagine I could do this but it doesn't work (unless there's another way to do it in this template code?):


<?php
foreach ($this->get_field('image') as $image) {
  echo "<img class="profileImg" src=\"{$image['guid']}\" />";
}
?>

<div class="profileText">{@text}</div>


So I have kept it like this:

<div class="profileImg" ">
<?php
foreach ($this->get_field('image') as $image) {
  echo "<img src=\"{$image['guid']}\" />";
}
?>
</div>
<div class="profileText">{@text}</div>

and added

.profileImg img{
max-width:100%:
}


as you pointed out.

Thanks!!
0
 
Kyle HamiltonData ScientistCommented:
you're using the wrong type of quotes.

<?php
foreach ($this->get_field('image') as $image) {
  echo "<img class='profileImg' src=\"{$image['guid']}\" />";
}
?>

Open in new window


or the other way is to escape the quotes:

<?php
foreach ($this->get_field('image') as $image) {
  echo "<img class=\"profileImg\" src=\"{$image['guid']}\" />";
}
?>

Open in new window

0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
igloobobAuthor Commented:
Brilliant thanks!!
0
 
Jason C. LevineNo oneCommented:
@kozaiwaniec Nicely done.  Good work...
0
 
Kyle HamiltonData ScientistCommented:
Thanks guys.. :)))
0
 
Kyle HamiltonData ScientistCommented:
/*PODS TEMPLATE */

<!-- <div class="profileImg" "> -->
<?php
foreach ($this->get_field('image') as $image) {
  echo "<img class="profileImg" src=\"{$image['guid']}\" />";
}
?>
<!-- </div> -->
<div class="profileText">{@text}</div>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now