Question

我希望在这个方框中有一个漂亮的框 AND 一个漂亮的徽标（徽标仅用于示例目的）。

但我不知道该怎么做。

我的图片标签看起来像这样

<img class="col-sm-12 pull-right" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" />

如果我在width="200"标记中加入height="200" <img>，我的观点将如下所示。

enter image description here

我有一个漂亮的盒子，但是丑陋的标志（伸展）。

如果我仅在width="200"标记中加入<img>，我的视图将如下所示。

enter image description here

我有一个漂亮的标志，但是丑陋的盒子（没有排队）。

无论哪种方式，我选择都会搞砸我的观点。：（

Answer 1

您可以将图像放在200x200 div中，并将图像居中放置（但不要将其拉伸），如下所示：

.imgbox{
    border:solid 4px grey;
    border-radius:5px;
    width:200px;
    height:200px;
    display: table-cell; vertical-align: middle 
}

<div class="imgbox">
    <img src="http://img3.wikia.nocookie.net/__cb20100520131746/logopedia/images/5/5c/Google_logo.png">
</div>

Answer 2

使用background-size属性是最简单的方法。

在此处详细了解：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

＆＃13;

* { margin:0; padding:0 }

figure.logo {
  width: 200px;
  height: 200px;
  background-image: url('http://i.imgur.com/F0RRqFy.jpg');
  background-size: cover;
}

＆＃13;

<figure class="logo"></figure>

＆＃13;

可编辑演示：http://jsbin.com/gituzu/2/edit?html,css,output

Answer 3

您可以使用position: absolute;：

将图像水平和垂直居中于父宽度和高度

HTML：

<div class="img_wrap">
    <img src="https://pbs.twimg.com/profile_images/453545705622106112/6ERHbJBN.jpeg" />
</div>
<div class="img_wrap">
    <img src="http://wottageek.com/wp-content/uploads/2014/10/Dropbox-Logo.png" />
</div>  
<div class="img_wrap">
    <img src="https://longren.io/wp-content/uploads/2014/04/do.png" />
</div>

CSS：

.img_wrap
{
    width: 200px;
    height: 200px;
    position: relative;
    float: left;
    margin-right: 10px;
    border: 5px solid #ccc;
}

.img_wrap img
{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

示例：http://jsfiddle.net/82bhzxfe/

如何在修复高度div中保留一个漂亮的徽标？

3 个答案: