Как сохранить приятный логотип в абсолютной высоте div?

Я хочу иметь красивую коробку И красивый логотип в этом окне (логотипы, например, предназначены только для целей).Как сохранить приятный логотип в абсолютной высоте div?

НО Я не знаю, как это сделать.

У меня есть изображение тегов выглядеть следующим образом

<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

Я получил симпатичный логотип, но уродливый ящик (не совпадает).

В любом случае, я выбрал, будет винить мой взгляд. :(

источник

2014-12-08 iori

Какой ящик вы пытаетесь положить его в? – SamHuckaby

Вам нужны изображения, которые подходят для одного и того же размера, сохраняя при этом их соотношение. В первых примерах просто растянуты, и они не уважают отношение, и вы получаете уродливое расширение. Попробуйте найти изображения, которые будут соответствовать 200x200, сохраняя коэффициент. –

Установите размер в поле div, а не на картинке –

Вы можете поместить изображение в 200х200 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>

источник

2014-12-08 18:11:49 nicael

Вам нужно будет добавить 'overflow: hidden ' – Zaqx

Немного странно, что вы используете стенографию границ, а затем переопределяете ее с помощью 'border-color'. Любая конкретная причина, по которой вы не просто выполняли' border: 4px solid grey'? – Zaqx

@Zaqx Just: do not знаете: D – nicael

Использования background-size свойства является простейшими . способ

подробнее об этом здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

* { margin:0; padding:0 } 
 

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

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

редактируемые Demo: http://jsbin.com/gituzu/2/edit?html,css,output

источник

2014-12-08 18:16:27 Zaqx

вы можете центрировать изображения по горизонтали и по вертикали к родительскому ширине и высоте с помощью 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/

источник

2014-12-08 18:39:56

Как сохранить приятный логотип в абсолютной высоте div?

ответ

Смежные вопросы