我有大量可变大小的图像，可以上传或在数据库中找到。在不运行脚本来调整大小的情况下，是否有任何方法可以纯粹修改 HTML 或使用 CSS，以便图像不会扭曲和拉伸以匹配我分配的 300x200 尺寸，而是切掉我的 300x200 图像最初是大图片（例如 400x400）？
我当前的标记看起来像
<image data-src="holder.js/300x200" alt="300x200" style="width:300px; height:200px;" src={{ photo.source_descr }}>
【问题讨论】：
:P
如果我正确理解了您的问题，您希望使用 CSS/HTML 和 height 和 width 调整图像大小而不拉伸图像。您想改为裁剪它。
我很确定您正在寻找 CSS 中的 clip 属性。混合clip 和width 和height 以裁剪图像，使其不会被拉伸，但会被裁剪以适合所需的width 和height。 Read up more about clip here.
这是您为需要而请求的额外代码（请注意，它使用 jQuery，因此您需要嵌入的代码才能工作）：
<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>
请注意，我从这个问题中得到了第二个脚本：Cropping images from center on the fly。
【讨论】：