Question

我有img这个css：

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

这使得img始终保持在屏幕内。现在我想在这个img和div中的一些其他元素周围放置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-preview，我希望它适合

IMG

内！

Answer 1

为div（此处为 img-thumb ）标记设置宽度和高度，然后设置图片width和height根据它。或者你可以直接设置图像的宽度和高度。

＆＃13;

html,body{
  width:100%;
  height:100%;
  }

img{
  max-width:80%;
  max-height:80%;
  }

＆＃13;

<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>

＆＃13;

Answer 2

i change your div.img-preview display into block to see what happened. i put some more wrap for the image and for the buttons. display flex to tidy things up.

and actually i don't see any difficulty here, can you to be more specific about ur question?

.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>

调整div以适应内部内容

2 个答案: