CODEWITHSUNDEEP
htmlcssimage
Becky
Becky

Reputation: 2289

Image exceeding div's max-height and max-width rules

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?

Upvotes: 5

Views: 12514

Answers (2)

PiranhaGeorge
PiranhaGeorge

Reputation: 999

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%;
}

Upvotes: 0

Andrew
Andrew

Reputation: 1880

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;
}

Upvotes: 3

Related Questions