css image crop resize

Question

I try to make i image gallery. But I have a problem. When the size of the images are different, the image can not be beautiful. so i need to add resize pictures.e.g.. The dimensions of the photo width: 800px height: 400px another photo's size 600px 1024px. I want to see my pictures size in a div width: 198px height: 198px. if 100% of the width 198px height dimensions are very different.

I want like facebook, whatever the size of uploaded photos. Picture without image size width: 198px height: 198px get. This is my demo : CodePen

HTML :

<div class="profile_cover_container">
  <div class="cover_container">
    <div class="cover_img">
      <a href="#"><div class="img_200px200px"><img src="https://scontent-b-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/1780641_780166082011699_1924260798_n.jpg" width="198" height="198" padding="0"></a></div>
      <a href="#"><div class="img_200px200px"><img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/964870_679724332055875_989825665_o.jpg" width="198" height="auto" padding="0"></a></div>


      </div>
  </div>


</div>

CSS :

.profile_cover_container{
  position:relative;
  width:851px;
  height:400px;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  border:1px solid #d8dbdf;

  -webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
  margin-top:3px;
}
.cover_container {
  width:851px;
  height:400px;
  float:left; 
}
.cover_img {
  float:left;
  width:200px;
  height:400px; 
  background-color:#000;
}
.img_200px200px {
  float:left;
  width:198px;
  height:198px;
  margin:1px;
  overflow: hidden;
}

.img_200px200px img {

   width: 100%;

}

Answer 1

I don't think you can do what you want with pure css as you will need to make a calculation to see if the images height is less than the width. As you have tagged this with jQuery, you can add the following css:

.img_200px200px img.height {
   width: auto;
   height:100%;
}

Then you can use this jQuery on document load

$('.img_200px200px img').each(function() {
    var image = $(this),
        height = image.height(),
        width = image.width();

    if (width > height) {
        image.addClass('height');
    }
});

Example

Answer 2

Mustafa, I'm having trouble understanding what you really need, but I understand your english is not great. That's ok. Let me try this. I think this is what you are looking for. If not, let me know and I'll delete or modify the answer.

If you want to display all your pictures at 198px but you don't want the height to distort your picture proportionality, simply chage the height:to auto.

.img_200px200px {
    float:left;
    width:198px;
    height:auto;
    margin:1px;
    overflow: hidden;
 }

You may need to update your picture container as well.

Is this what you need?

******EDITED TO SHOW AN IMAGE******

You said "like facebook". Take a look at Facebook picture layout. They have a container that restricts the max-width so that it's never wider than 470px. But the height is auto to maintain proportionality. If you set a defined height to an image you may end up stretching it or compressing it.

Also, you want the width to be in percentages instead of pixels. That way when you resize the window, it can shrink with the browser as well