时间:2017-05-23 16:01:18

标签: html css twitter-bootstrap

我希望文字不要大于图片,这是一个问题的例子

http://i.imgur.com/DwIMS3Q.png

我希望它如何

http://i.imgur.com/VOA1W60.png

正如您所看到的,当图片太紧时,由于文字的原因,会出现白色边框。我希望文本不要比图片大。

以下是HTML代码:

<div class="row">
    <div class="col-md-6" style="float:none;margin:0 auto;">
        <div class="polaroid center-block">
            <img src="./images/650x650.png" alt="Norway" class="img-responsive center-block" style="width:auto;height:auto">
            <div class="my_container" style="width:auto;height:auto">
                <p>The Troll's in Hardanger, Norway</p>
            </div>
        </div>
    </div>
</div>

这是CSS:

body {
    margin: 25px;
}

div.polaroid {
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 25px;
}

div.my_container {
    text-align: center;
    padding: 10px 20px;
}

提前致谢。

1 个答案:

答案 0 :(得分:1)

将图像宽度设置为100%。

public class DestinationEntities : DbContext, IDbContext
{
    public DestinationEntities() : base("DestinationEntities") { }

    public DbSet<MyTable> MyTable { get; set; }

    public override int SaveChanges() 
    {
        return base.SaveChanges(); //exception thrown here
    }

    protected override void OnModelCreating(DbModelBuilder modelBuilder) 
    {
        base.OnModelCreating(modelBuilder);
    }

    IDbSet<T> IDbContext.Set<T>() 
    {
        return this.Set<T>();
    }
}

还有宝丽来:

.polaroid img{
    width: 100%;
}