4

I created a picture grid and for some reason the pictures aren't responding to the max width and max height rules.

I made up the class 

.sizedimg {
    max-width:100%;
    max-height:100%;
}

To size the images so that they would be in their natural state, but I want them to fix in the max-height 350px; and min-height 350px;

This is my html for it. I am trying to enclose the image in 'productpiccontainer' so that the pic won't exceed that div, but it is taking up the entire area of the class 'item'

<div class="item">
    <div class="productpiccontainer">
    <?php echo "<img class='sizedimg' src='productpics/".$product['img'] ."' alt='Product Pic'>"; ?>
    </div>      

    <p><?php echo "<a href='./viewProduct.php?view_product=$id'>" . $product['product_name'] . "</a>"; ?></p>
    <p> <?php echo "$" . $product['price']; ?> </p>                                     
</div>

I created a fiddle....https://jsfiddle.net/39qy0zdh/

But, for some reason it really isn't showing what is happening. So, if anyone would like to see a live example of this, my site is buyfarbest.com . There if you click on the products tab, you will see exactly what I mean. If you look at the empty product item on the right, that is how I am trying to format this, with the picture being in the inner border.

Anyone have any idea why this isn't working for me?

Becky
  • 2,283
  • 2
  • 23
  • 50
  • 2
    You need to add the class `sizedimg` to the image: `` - https://jsfiddle.net/39qy0zdh/1/ – Andrew Jun 19 '15 at 13:20
  • I have the class of 'sizedimg' in it though? If you look at my question, that is how I actually have the code on the page. I just added in a random pic for the fiddle – Becky Jun 19 '15 at 13:26
  • Its your jsfiddle that missing the class – Andrew Jun 19 '15 at 13:27
  • Any idea why this wouldn't be working on my actual code though? If I have that class in it, then why would it be taking up the entire parent div? – Becky Jun 19 '15 at 13:29
  • Try adding `overflow: hidden;` to `.productpiccontainer` - this will stop the image from creeping into the text area below. Your example does not show off the problem as well as going to the site – Andrew Jun 19 '15 at 13:32
  • That kind of works, but it takes of some important parts on the bottom of the pic. Is there anyway I can raise the pic some, so it shows right....but I will be adding other pics that don't look like this, so I don't want to gut them. – Becky Jun 19 '15 at 13:36
  • You need to position the pic higher up. i will add an answer below. try adding this and see if you like it: `.item{box-shadow: #999 0px 0px 6px;}` – Andrew Jun 19 '15 at 13:37

2 Answers2

2

To fix the product image you need to:

This will Stop the image flowing onto the text below:

.productpiccontainer {
  width: 100%;
  height: 100%;
  border: 1px solid #D9D9D9;
  min-height: 350px;
  max-height: 350px;
  overflow: hidden;
}

This will fix the position problem so you see more of the product:

.sizedimg {
  max-width: 100%;
  position: relative;
  margin-top: -70px;
}

If you like my little drop shadow effect on the products:

.item {
  width: 32%;
  text-align: center;
  border: 1px solid #D9D9D9;
  padding: 0px;
  list-style: none;
  float: left;
  margin-right: 10px;
  margin-bottom: 15px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  min-height: 420px;
  box-shadow: #999 0px 0px 6px;
}
Andrew
  • 1,850
  • 14
  • 18
  • This seems like overkill. Why not just remove min and max on `.productpiccontainer` and set its `height` to `350px`? – PiranhaGeorge Jun 19 '15 at 13:53
  • Because then it would not fit the width properly. This is the page the person is trying to fix: https://buyfarbest.com/products.php?shopnow=Shop+Now – Andrew Jun 19 '15 at 13:55
  • I'd prefer well sized images over cut off images, but I guess this works if the images aren't too big. – PiranhaGeorge Jun 19 '15 at 14:06
  • I appreciate all of your help. I think your solution would have been the best if it would have sized my images. I need them to be larger and cannot have them small. I very well may come back and use this code later on it I get different sized images. Once I can give positive up-votes I will come back and do so for you. Thanks. – Becky Jun 19 '15 at 14:47
0

You missed the sizedimg class off your image.

https://jsfiddle.net/39qy0zdh/2/

Edit:

Set the max-height on .sizedimg to 350px. max-height wont work as explained at https://stackoverflow.com/a/14263416/388566

Better yet, do this https://jsfiddle.net/39qy0zdh/5/

You'll need to set fixed height on .productpiccontainer anyway in order to keep your grid tidy.

Here's some improved CSS. 

.productpiccontainer {
    width: 100%;
    height: 350px;
    border: 1px solid #D9D9D9;
}
.sizedimg {
    max-width: 100%;
    max-height: 100%;
}
Community
  • 1
  • 1
PiranhaGeorge
  • 999
  • 7
  • 13
  • I have the class of 'sizedimg' in it though? If you look at my question, that is how I actually have the code on the page. I just added in a random pic for the fiddle. – Becky Jun 19 '15 at 13:25
  • Ah sorry, though the jsfiddle was the same as the website. You'll want to set `max-height: 350px` on `sizedimg`. `max-height: 100%` wont work. – PiranhaGeorge Jun 19 '15 at 13:31
  • Is there a better way to do this, so it works well with different size screens? I don't mean media queries with phones or tablets. I mean with different size desktop monitors. That's why I tried doing 100%, so that it would stay the universal same size. – Becky Jun 19 '15 at 13:33
  • You can't measure 100% of 100%, a base value has to be set. You should really set the `.productpiccontainer` class to a `height` of `350px` rather than using min and max. Then `sizedimg` can keep `max-height: 100%`. – PiranhaGeorge Jun 19 '15 at 13:39
  • Doing this makes the image not cover the whole width though. – Becky Jun 19 '15 at 14:01
  • I would have thought that preferable as the alternative would cut off some of the image. If you don't mind some of the image being cut off @Andrew's answer is the way to go. – PiranhaGeorge Jun 19 '15 at 14:04
  • I appreciate all of your help. I think your solution would have been the best if it would have sized my images. I need them to be larger and cannot have them small. I very well may come back and use this code later on it I get different sized images. Once I can give positive up-votes I will come back and do so for you. Thanks. – Becky Jun 19 '15 at 15:22