如何根據縮放後的圖像寬度動態設置div寬度

我希望頁面可以調整圍繞圖像的div的寬度，並在其下面放置一些文本，以便文本被強制打包以便不會超過圖像的寬度。拇指的寬度會因拇指而異。在下面的代碼中，我用「???」標識了未知的寬度。如何根據縮放後的圖像寬度動態設置div寬度

<div id="N-03-item" style="float:left; width: ???;"> 
    <p><a href="item.php?i=8"> 
    <img id="N-03" src="photos/thumbs/8.jpg" alt='Choker Necklace 18"'/><br/> 
    Frosted Flower Choker Necklace 18"</a></p> 
</div>

我想這是一些需要用JavaScript來發生的（雖然CSS解決方案也將是一件好事），但JavaScript是不是我的強項。根據DOM在每個實例中報告的圖像寬度，每次生成的div寬度將需要不同。

有人能告訴我適當的JavaScript會是什麼？

來源

2012-03-10 sanitycheck

您可以通過去除不必要的部分來引起更多的自豪感。不只是複製你的代碼。這告訴我們，在你問 – HerrSerker 2012-03-10 19:16:11

如果你可以使用它jQuery woould是這樣的：

$("#N-03-item").css({ 
    "width": $("#N-03").width() 
});

來源

2012-03-10 16:34:49 Voooza

之前，你認爲你可以在頁面的onready事件中做到這一點，但沒有改變圖像不被加載，導致寬度不能正確返回？ – 2012-03-10 16:37:06

是的。特別是如果圖像加載dynamicaly。但是當圖像加載時，div不會忽略「寬度」並傳播到圖像大小？ – Voooza 2012-03-10 16:49:11

OK，你不必使用JavaScript這一點。現在

OK，@sanitycheck我用jQuery做到了：選中此小提琴http://jsfiddle.net/jeykeu/WCHcP/2/

更新。退房的小提琴http://jsfiddle.net/jeykeu/2dBJa/2我希望它幫

來源

2012-03-10 16:55:52

這不適合我。我不想在預定的固定尺寸上設置最大寬度。我想div的寬度來自圖像實例的寬度。 – sanitycheck 2012-03-10 17:09:02

在任何情況下，我想一個具有max-width屬性的div將有所幫助。你爲什麼不嘗試@ Voooza的答案和我的結合。 – 2012-03-10 17:12:03

基於這些假設：

你是不是能夠通過服務器代碼訪問圖像的寬度，並設置寬度上包含DIV
您可以預留足夠的空間換行，因爲解決方案使用絕對定位，並採取文字跳出流程

我會嘗試：

#N-03-item { 
    position : relative; 
} 

/* if you can add a class for items, in addition to ID (e.g. N-03-item) than use a 
    rule such as 

.item { 
    position :relative 
} 

*/ 

.description{ 
     position : absolute; 
}

說明絕對定位，但沒有頂部或左側指定。 大多數用戶代理將嘗試定位.description元素，其中應出現。這會導致描述的寬度受到DIV項的寬度的限制（其自身被縮小以適應圖像的寬度，因爲它被左移）。

我認爲你仍然需要在物品下面留有足夠的空間，如果有物品在後面，文本將從流程中取出。

例子：http://jsfiddle.net/5FJvd/

來源

2012-03-10 17:07:56 dave

下面是一個完整的工作示例。一旦圖像加載完成，就會調整DIV的寬度。哪個可以早在domready事件。無需等到document.onload觸發。我稍微改進了標記，擺脫了BR標記。（見JSFiddle）

CSS

.link-thumb { float: left; border: 1px solid gold; position: relative; } 
.link-thumb img { display: block; } 
.desc { position: absolute; }

HTML

<div class="link-thumb" id="id"> 
    <a href="#"> 
     <img class="thumb" id="id" src="http://placekitten.com/100/100" alt="foo" width="100" height="100" /> 
     <span class="desc">Frosted Flower Choker Necklace 18"</span> 
    </a> 
</div>

$('.thumb').on('load', function() { 
    var $this = $(this); 
    $this.parents('.link-thumb').width($this.width()); 
});

如果你不使用jQuery 1.7+與.bind方法替代.on方法！

編輯：我納入了戴夫的CSS唯一的解決方案。所以這個腳本只需要運行IE7和更老的！但是，根據您的使用情況，您現在可能必須在.link-thumb上設置固定高度，因爲.desc現在不屬於流程的一部分。

來源

2012-03-10 17:12:15

戴夫的解決方案是優雅和正確的 - 但會在IE7和更舊版本中失敗。 – 2012-03-10 17:23:46

而不是$ this.parents（'。link-thumb'）我推薦$ this.closest（'。link-thumb'），因爲父母理論上可以返回多個值。 – 2012-03-15 11:08:48

如何根據縮放後的圖像寬度動態設置div寬度

回答

相關問題