HTML 图像不调整大小

Posted 2023-02-25

【中文标题】HTML 图像不调整大小

【英文标题】：HTML Image Don't Resize

【发布时间】：2013-01-13 22:25:39

【问题描述】：

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

我当前的标记看起来像

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

【问题讨论】：

我很困惑，我不太明白你的问题......你的代码应该可以工作。

@DumbSearch 但显然没有，这就是问题:P

@tkbx 我认为他不希望它变形和拉伸，他希望它被裁剪？

【参考方案1】：

如果我正确理解了您的问题，您希望使用 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。

【讨论】：

谢谢，我相信这就是我要找的。但是，我的问题是我有多个图像的高度和宽度，而且似乎使用剪辑，我需要指定远离每个边框的空间。我的 HTML 是自动生成的，所以有没有办法不根据原始图像的大小进行裁剪，而只是裁剪图像的中心？

@user1431282 我编辑了我的答案以满足您的要求。如果这有帮助，请将我的答案标记为正确。

@user1431282 很高兴它有帮助！ :)