The problem with a situation like that is you have images with different aspect ratios, so you can’t use a proportional sizing CSS rule if you want all the images to be the same size.
You have two solutions: the first is to only use images with the correct aspect ratio. If that’s not practical, the second possibility is more involved: you can affect an automatic crop by enclosing the image in another div that has overflow:hidden and set that to the display size you want. Then, using a proportional CSS sizing rule, make sure the image inside of it is at least as large as the crop box. It will cut off part of the image in some cases, but they’ll all be the same size.
We are going to have clients uploading pics, so asking them for particular sizes might be too difficult for them. 🙂
If part of the image is cut off, that’s fine. What would the DIV and CSS sizing rule be for those?
Try something like this:
.pdb-list .image-field-wrap {
width: 300px;
height: 237px;
overflow: hidden;
}
.pdb-list .image-field-wrap img {
height: 240px;
width: auto;
max-width: inherit;
}
You’ll notice the size on the IMG is slightly larger than the enclosing SPAN. You may have to increase this to make sure the images are all at least as large as the SPAN.
