Question

I have a large number of variable size images that may either be uploaded or found in a database. Without running a script to do the resizing, is there any way to purely modify the HTML or use CSS so that instead of having the image distorted and stretched out to match my allocated dimensions of 300×200, I instead have a 300×200 image cut of out my originally large picture (say for example 400×400)?

My current markup looks like

<image data-src="holder.js/300x200" alt="300x200" style="width:300px; height:200px;" src={{ photo.source_descr }}>

Answer 1

If I understood your question correctly, you want to resize the image using CSS/HTML with height and width without stretching the image. You want to crop it instead.

I’m pretty sure that you’re looking for the clip property in CSS. Mix clip and width and height to crop your image so that it isn’t stretched, yet cropped to fit the desired width and height. Read up more about clip here.

---

Here is the extra code you requested for your needs (note that it uses jQuery, so you need that embedded for this to work):

<style>
.container     { position: relative; overflow: hidden; }
.container img { position: absolute; }
</style>

<div class="container">
    <img src="..."/>
</div>

<script type="text/javascript">
$image = $('.container img');
width = $image.width();
height = $image.height();

$image.css({
    left: 0 - (width / 2),
    top: 0 - (height / 2)
});
</script>

Note that I got the second script from this question: Cropping images from center on the fly.