HTML图像不要调整大小

我有大量的可变大小的图像，可以上传或在数据库中找到。如果没有运行脚本来进行大小调整，是否有任何方法可以纯粹修改HTML或使用CSS，以便让图像失真并伸展以匹配我分配的300x200尺寸，而不是将我的300x200图像剪切掉原本大的图片（比如400x400）？HTML图像不要调整大小

我当前的标记看起来像

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

来源

2013-01-13 user1431282

我很困惑，我真的不明白你的问题......你的代码应该工作。 – 2013-01-13 22:28:51

@DumbSearch，但它显然没有，这就是问题'：P' – tkbx

@tkbx我认为他不希望它扭曲和拉伸，他希望它裁剪？ – 2013-01-13 22:35:31

如果我明白你的问题正确，你想用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。

来源

2013-01-13 22:32:38

谢谢，我相信这就是我要找的。然而，我的问题是，我有多个高度和宽度的图像，看来，与剪辑，我需要指定的空间远离每个边界。我的HTML是自动生成的，所以有没有一种方法可以根据原始图像的大小进行裁剪，而只是裁剪图像的中心？ – user1431282

@ user1431282我编辑了我的答案以满足您的要求。如果这有帮助，请标记我的答案是正确的。 – 2013-01-13 23:32:23

@ user1431282很高兴帮助！ :) – 2013-01-13 23:39:48

HTML图像不要调整大小

回答

相关问题