調整大小格，以適應內部內容

Question

我有一個img這個CSS：

maxHeight: "80%" 
maxWidth: "80%" 

這是使img始終停留在屏幕內。現在我想把這個img和該div內的其他元素放在一起，使它們覆蓋img。而且我不知道如何讓外部div適合img的大小，所以其他內容不會超出img，但img仍然必須始終保持在屏幕內。請幫忙！謝謝你，對我的英語感到抱歉！

<div class="img-thumb" img-name="@Model[i].TenHinh" img-description="@Model[i].MoTa", img-dim="@Model[i].Width x @Model[i].Height", img-size ="@Model[i].Size"> 
      <img src="@(domain + "Contents/Imgs/" + @Model[i].MaHinh + @Model[i].Duoi)" /> 
      <div style="position: relative; display: none;" class="img-preview" > 
       <img src="@(domain + "Contents/Imgs/" + @Model[i].MaHinh + @Model[i].Duoi)"/> 
       <button style="position: absolute; bottom: 0; left: 0;"><</button> 
       <button style="position: absolute; bottom: 0; right: 0;">></button> 
      </div> 
      <div class="img-panel"> 
       <button type="button" class="btn-Xem" img-code="@Model[i].MaHinh" img-name="@Model[i].TenHinh">Xem</button> 
       <button type="button" class="btn-Xoa" img-code="@Model[i].MaHinh" img-name="@Model[i].TenHinh">Xóa</button> 
       <button type="button" class="btn-Sua" img-code="@Model[i].MaHinh">Sửa</button> 
      </div> 
     </div> 

我的DIV是.IMG預覽和我希望它正好與

IMG

裏面！

Answer 1

設置的寬度和高度，你div（這裏是IMG-拇指）標籤，然後根據與it.or否則你可以直接設置寬度和高度的圖像設置圖像width和height。

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    } 
 

 
img{ 
 
    max-width:80%; 
 
    max-height:80%; 
 
    }

<div class="img-thumb" img-name="@Model[i].TenHinh" img-description="@Model[i].MoTa", img-dim="@Model[i].Width x @Model[i].Height", img-size ="@Model[i].Size"> 
 
      <img src="https://i.stack.imgur.com/cxhja.jpg" /> 
 
      <div style="position: relative; display: none;" class="img-preview" > 
 
       <img src="https://i.stack.imgur.com/cxhja.jpg"/> 
 
       <button style="position: absolute; bottom: 0; left: 0;"></button> 
 
       <button style="position: absolute; bottom: 0; right: 0;"></button> 
 
      </div> 
 
      <div class="img-panel"> 
 
       <button type="button" class="btn-Xem" img-code="@Model[i].MaHinh" img-name="@Model[i].TenHinh">Xem</button> 
 
       <button type="button" class="btn-Xoa" img-code="@Model[i].MaHinh" img-name="@Model[i].TenHinh">Xóa</button> 
 
       <button type="button" class="btn-Sua" img-code="@Model[i].MaHinh">Sửa</button> 
 
      </div> 
 
     </div>

Answer 2

我改變你的div.img預覽顯示成塊，看看發生了什麼。 我把一些更多的圖像和按鈕換行。 顯示flex以整理事情。

實際上我並沒有在這裏看到任何困難，你能更具體地談談你的問題嗎？

.img-preview{ 
 
position:relative; 
 
width:100%; 
 
display:flex; 
 
    flex-direction:column; 
 
} 
 
.the-image, .buttons{ 
 
position:relative} 
 

 
.buttons{ 
 
display:flex; 
 
justify-content:space-between; 
 
width:100%;} 
 

 
.img-preview img{ 
 
width:100%;}

<div style="position: relative" class="img-preview" > 
 
<div class="the-image"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Big_Wood%2C_N2.JPG"/> 
 
</div> 
 
<div class="buttons"> 
 
       <button><</button> 
 
       <button>></button> 
 
</div> 
 
      </div>