Question

我有大量可变大小的图像，可以上传或在数据库中找到。没有运行脚本来进行大小调整，有没有办法纯粹修改HTML或使用CSS，以便不是让图像失真和伸展以匹配我分配的300x200尺寸，而是让我的300x200图像切出我的最初的大图片（例如400x400）？

我目前的标记看起来像

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

Answer 1

如果我正确理解了您的问题，您希望使用带有height和width的CSS / HTML调整图片大小，而不会拉伸图像。你想要裁剪它。

我很确定你在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。

HTML图片不要调整大小

1 个答案: