2

我有大量可变大小的图像，可以上传或在数据库中找到。在不运行脚本来调整大小的情况下，有什么方法可以纯粹修改 HTML 或使用 CSS，这样我就不会扭曲和拉伸图像以匹配我分配的 300x200 尺寸，而是切掉我的 300x200 图像最初是大图片（例如 400x400）？

我当前的标记看起来像

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

1 回答 1

3

如果我正确理解了您的问题，您想使用 CSS/HTML 调整图像大小height，width有无拉伸图像。你想裁剪它。

我很确定您正在寻找clipCSS 中的属性。混合clip和width来height裁剪图像，使其不会被拉伸，但会被裁剪以适合所需的width和height。阅读更多关于clip这里。

这是您根据需要请求的额外代码（请注意，它使用 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。

于 2013-01-13T22:32:38.097 回答