调整大小格，以适应内部内容

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>