Solved

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

Posted on 2012-08-08
7
1,309 Views
Last Modified: 2012-08-08
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
Comment
Question by:igloobob
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38270826
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
 

Author Comment

by:igloobob
ID: 38270946
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 38271015
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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

Author Comment

by:igloobob
ID: 38271064
Brilliant thanks!!
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 38273099
@kozaiwaniec Nicely done.  Good work...
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38273263
Thanks guys.. :)))
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38274115
/*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

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Find out what you should include to make the best professional email signature for your organization.
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question