Skip to main content
Participant
December 21, 2017
Question

fluid image size issue

  • December 21, 2017
  • 1 reply
  • 449 views

I have 3 divs across the page (main image with arrows on either side) They are all 700 px in height. When I insert them into their divs, I get 3 different heights for the images. Any suggestions? Thank you!

This topic has been closed for replies.

1 reply

Jon Fritz
Community Expert
Community Expert
December 21, 2017

If your images are set to take up a % of their parent container's width, the height will recalculate accordingly. If your widths are all different, but set to take up the same % space in the parent container, their heights will end up different as the image width scales.

It's hard to tell you exactly what you need to do to fix your code or images without seeing it/them. Could you post a link to your work in progress so we can give you more specific advice?

Participant
December 21, 2017

Thanks Jon. I originally sized the divs as follows: 1 column, 10 columns, 1 column across a 12 column grid. Even if I paste the same image into each of the identical side divs, the right side comes out much longer than the left one, and each is longer than the main center image (even though all the images are 700px. The css code for each side div look identical.

Jon Fritz
Community Expert
Community Expert
December 21, 2017

I'm sorry, but your image doesn't really tell me anything about your code or your problem, aside from showing me you're using a Legacy Fluid Grid Layout and have some css written, also that you're in Design View. That last one raises a question, is the problem in Design View, Live View, in the browser when testing the page or all of the above?

In order to get help with something that's driven by code, we need to see the code. The easiest way to do that would be to upload your work in progress to a test location on your server (I suggest a folder called TEST), then share that location with us via a link (www.yourdomain.com/TEST). Once the problem is solved, you simply remove the test location from the server along with the content.

A very, very distant second (due to the Legacy Fluid Grid Layout) would be to copy/paste all of the code of your page and dependent files to the forum in the hopes that someone will rebuild your page in their environment to find the issue. That's a much tougher proposition when there's an image problem because some display issues related to images don't have anything to do with code. Since we don't get your images in a code paste, the problem may go unanswered. Again, a link to your work on a server you control makes a huge difference in troubleshooting your work.