I'm working with Bootstrap and I want to put some photos into my div and I want them to be all at the same size ("standardize").

If they're too big (and they will always be) I want to resize them to fit in my div and crop them if necessary .

For the moment her is what I do :

I've tried to change the style of the image in jQuery in a function:

• If the height is bigger than the width, I switch the style to max-width:100% and height auto.

• Inversement if the width is bigger than the height.

But I'm still new to jQuery and I am probably doing something wrong; can someone light my lantern please?

Here is my jQuery

$(document).ready(function(){
  photoResize();
  $(window).resize(function(){
    photoResize();
  });   
});

function photoResize(){
  image_w = $('img').width();
  image_h = $('img').height();

  if(image_h > image_w)
  {
    $('img').css("max-width","100%");
    $('img').height("auto");
  } 
  else if(image_w > image_h)
  {
    $('img').css("max-height","100%");
    $('img').width("auto");         
  } 
}

And here is a Fiddle for a better view : https://jsfiddle.net/Baldrani/DTcHh/9801/

---

Simplicity

I do this quite often in the CMS we use at work for galleries etc. The method I use involves a jQuery library called imgLiquid.js.

This will turn an inline image into a background image on the parent div. It's good because you can achieve your desired effect. It will crop the image (as it technically becomes a background image) and will apply background-size: cover; and background-position: center center; as inline styles.

You can find the plugin here

To initialize the plugin you just need:

$(".myele").imgLiquid();

Overheads

The plugin is very small (roughly around 5.106 KB) so you don't need to worry about adding weight to the page. It really it the most simple method I've come across (bar using thumbnails generated from the sever-side - see note at the bottom).

Cue CSS

I've tested this thoroughly and found it gives excellent results. You may then ask... what happens to my parent divs (as technically the plugin hides the img element - which therefore means the parent element doesn't know what height to make itself).

An easy method to make things work responsively, or not:

.myelement:before{
    content: "";
    padding-top: 50%;
    display: block;
}

This CSS will give your heights back to the wrapping element. So if you wanted certain proportions you could use this math:

h / w * 100 = your percentage for the padding-top.

Working Example

Small note

Technically if I had the control I'd advise just using thumbnails.. I assume you're using some sort of system that could technically just render cut down versions of the images? The reason I use this method — and suggested it — is that I don't have control over the CMS and I'm assuming you just want to manage the code that's being produced as it's not stated.

---

if you want to make your images the same size then you dont need any javascript or calculations, why not just set it in css?

.someUniqueContainer img{
  width:300px;
  height:300px; // or what ever height you want
}

I'm guessing that in reality you actually want to crop all your images to a set width/height. if that's the case you'll need a serverside script for that.

where are the images coming from? it would be easyer to just edit them. if they are coming from a user then you would resize/crop on the server on file upload

---

There were several mistakes in your code. Please look at this jsfiddle, please see https://jsfiddle.net/DTcHh/9796/

$(document).ready(function () {

     photoResize();

     $(window).resize(function () {
         photoResize();
     });
 });

 function photoResize() {
     image_w = $('img').width();
     image_h = $('img').height();

     if (image_h > image_w) {
         $('img').css("max-width", "100%");
         $('img').height("auto");
     } else if (image_w > image_h) {
         $('img').css("max-height", "100%");
         $('img').width("auto");
     }
 }

链接地址: http://www.djcxy.com/p/78176.html

上一篇: JCrop和PHP GD用黑条返回图像

下一篇: 将图像标准化为div