如何在比自然尺寸更大的img標籤中拉伸圖像？

如果我有一個N像素的N像素圖像，我該如何使用CSS/JS/jQuery來填充一個說...... 2N像素乘以2N像素空間？如何在比自然尺寸更大的img標籤中拉伸圖像？

詳細信息：我更後端開發，但我目前正在執行的功能，您單擊圖像上的「放大」，然後將其與一個更大的形象，然後調整其大小<div>的<img>替換它標籤佔據更多的空間並有效地「放大」（或者實際上只是放大了大圖）。

我需要做的（UX）：在等待更大的圖像加載時我希望用戶仍然能夠「縮放」，但由於較大的圖像尚未加載，他們只會得到一個顆粒狀的版本圖像直到它被更高分辨率的圖像取代。

來源

2015-11-19 Adam James

相應地更改IMG元素的width和height屬性。

或者，使用同名的CSS屬性。請注意，在CSS中，width和height必須具有單位（對於圖像，通常爲px）。

來源

2015-11-19 02:41:47

是的，我想知道爲什麼我遇到了這樣一個看似簡單的任務（即使是後端開發者）的麻煩，結果發現這個人使用vh和vw而不是像素或％單位大小，我猜這不會將圖像拉伸超過其自然分辨率。 –

這可能工作：

var img = $("img"); 
$("div").click(function() 
{ 
    img.css("width",img.width()*2); 
    img.css("height",img.height()*2); 
}

來源

2015-11-19 02:53:13 vpedrosa

我把東西一起使用toggleClass，transform: scale和transition。

單擊圖像將在一秒內調整大小，同時加載較大的圖像。然後，它可以在轉換結束時選擇該點，或者在加載圖像比轉換持續時間花費更長時間的情況下，在完成加載後追加圖像。在期間切換轉換過於複雜，我一開始就試過。還請在父母上進行addClass的檢查，以便只加載一次較大的圖像，而不是每次切換放大。

Pen

$('div').click(function() { var div = $(this), img = div.find('img'), path = img[0].src.replace('.jpg', ''), ended, loaded; img.toggleClass('zoom'); if (!div.hasClass('large')) { div.addClass('large'); var big = new Image(); big.src = path + '_large.jpg'; img.one('transitionend', function() { ended = true; if (loaded) replaceImage(big); }); $(big).one('load', function() { loaded = true; if (ended) replaceImage(big); }); } function replaceImage(grand) { if (img.hasClass('zoom')) $(grand).addClass('zoom'); div.html(grand); } });

body { text-align: center; background: grey; overflow: hidden; } div { display: inline-block; } div img { width: 400px; -webkit-transition: -webkit-transform 1s linear; transition: transform 1s linear; -webkit-transform-origin: center top; transform-origin: center top; } .zoom { -webkit-transform: scale(2); transform: scale(2); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <img src="//www.anony.ws/i/2015/11/19/yosemite.jpg" alt=""> </div>

它從原始圖像經過的路徑，並增加了_large它。因此，在這種情況下，圖像必須位於相同的文件夾中，基本上與該額外擴展名相同。

編輯以確保zoom類只有在原始圖像也有應用時才應用。當用戶在加載大版本之前多次點擊時，這會消除一個小故障。

來源

2015-11-19 08:17:26 Shikkediel

如何在比自然尺寸更大的img標籤中拉伸圖像？

回答

相關問題