Question

我有以下代码

<div class="col-xs-12 col-sm-6 col-md-8">...</div>
<div class="col-xs-6 col-md-4">
    <div id="gallery">
        @foreach (var image in Model.Images)
        {
            <a href="@Url.Content(ViewBag.Path + image.filename)" data-lightbox="image-1">
                <img src="@Url.Action("Thumbnail", "Image", new { width = 120, height = 120, filename = @imagen.filename})" alt="@imagen.filename" />
            </a>
        }
    </div>
</div>

我想要的是把div与id＆＃34; gallery＆＃34;作为舍入的div，使其能够在调整浏览器屏幕大小时保持纵横比。

现在，如果我把这些行的css代码放在全屏模式下我得到了div。但是，当我将其调整为较小的屏幕尺寸（移动）时，我将潜水的右侧重叠在div中的图像上：

border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;

如何制作包含图像的响应良好的圆形div？

先谢谢你。

Answer 1

您需要使用＆＃39; img-responsive＆＃39; class，（您需要将width和height元素更改为最大宽度（或高度），您可能需要查看有关管理响应div的this S.O. post。然后只需将响应式图像保留在响应式div中，您应该全部设置。

<div class="container-fluid"><div class="row">Your divs > Your images</div></div>

如何在引导站点中放置一个舍入的div

1 个答案: