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圖像不要調整大小

回答

相關問題