Отзывчивое поведение CSS для центрированного изображения

Я не могу получить контейнер изображения (.colored-logo), чтобы охватить ширину браузера, когда я сжимаю его до размера мобильного телефона. Я создал fiddle here, чтобы вы могли видеть поведение.Отзывчивое поведение CSS для центрированного изображения

Извинения, но я поместил все мои CSS здесь, чтобы убедиться, что все, что влияет на него, включено.

Я работаю над шаблоном электронной почты, и я размещаю горизонтально и вертикально логотип в коробку с закругленными углами.

Мой HTML является:

<div class="row invoice-top-header"> 
    <div class="column third colored-logo"> 
     <div class="logo"> 
      <span class="image-center"></span><img src="http://s24.postimg.org/ebd3rwub5/fresh_creations_logo.png"/> 
     </div> 
    </div> 
    <div class="column third">...</div> 
    <div class="column third">...</div> 
</div>

row класса добавляет 15px внутреннюю прокладку, которую я смещение в контейнере (colored-logo) с -15px краями слева и справа.

CSS-я применяю это:

.colored-logo { 
    background: #989898; 
    height: 128px; 
    margin: 0px -15px 10px -15px; 
    padding: 15px; 
    width: 100%; 
} 
.logo { 
    white-space: nowrap; 
    text-align: center; 
} 
.image-center { 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
}

Почему логотип контейнера (Div с классом colored-logo, темно-серый фон) не заполняя браузер горизонтально один раз в мобильном режиме? Он выглядит 30px слишком коротким, чтобы покрывать браузер горизонтально. Спасибо!

источник

2015-10-22 TheRealPapa

какой элемент логотип контейнер вы имеете в виду? – Salketer

Привет @Salketer, контейнер с серым цветом фона и закругленными углами. Я хочу, чтобы он заполнял экран горизонтально ('color-logo'). Спасибо – TheRealPapa

«Я работаю над шаблоном электронной почты, и я размещаю горизонтально и вертикально логотип в коробку с закругленными углами». - Если это шаблон электронной почты, вряд ли он будет работать с подавляющим большинством почтовых клиентов. –

Похоже у вас есть отступы как в классе строки и столбце. Попробуйте CSS, если вы хотите, чтобы ваши изменения вступили в силу только в экранах мобильных устройств:

@media screen and (max-width: 640px) { 
    .colored-logo, .row { 
     padding: 0; 
     margin: 0; 
    } 
}

источник

2015-10-22 12:40:12

Получил это, спасибо @Roumelis! – TheRealPapa

<div class="invoice-top-header"> 
    <div class="column third colored-logo"> 
     <div class="logo"> 
      <span class="image-center"><img src="http://s24.postimg.org/ebd3rwub5/fresh_creations_logo.png"/> 
     </div> 
    </div> 
     <div class="row"> 
    <div class="column third"> 
     <div class="biller-details"> 
      <span><strong>BILLER NAME PTY LTD</strong></span> 
      <span>ADDRESS LINE 1</span> 
      <span>ADDRESS LINE 2</span> 
      <span class="desktop">TEL: 02 3333 4444</span> 
      <span class="mobile">TEL: <a href="tel:02 3333 4444">02 3333 4444</a></span> 
      <span>ABN: 12345678</span> 
      <span>ACN: 09876543</span> 
      <span><a href="mailto:[email protected]" data-rel="external">[email protected]</a></span> 
      <span>my-website.com.au</span> 
     </div> 
    </div> 
    <div class="column third"> 
     <div class="customer-details"> 
      <span><strong>CUSTOMER NAME PTY LTD</strong></span> 
      <span>ADDRESS LINE 1</span> 
      <span>ADDRESS LINE 2</span> 
      <span class="desktop">TEL: 02 5555 7777</span> 
      <span class="mobile">TEL: <a href="tel:02 5555 7777">02 5555 7777</a></span> 
      <span>ABN: 12345678</span> 
      <span>ACN: 09876543</span> 
      <span><a href="mailto:[email protected]" data-rel="external">[email protected]</a></span> 
      <span>customer-website.com.au</span> 
     </div> 
    </div> 
     </div> 
</div>

Изменить HTML в этом выше
Удалить маржу CSS свойство с .colored логотипа
Если вы кодированием бюллетеня вы действительно должны рассмотреть возможность использования таблиц и избежать свойств CSS3, как многие из электронная почта клиенты все еще Безразлично t support lot of things. Here you can find a list with email clint which does and doesn т поддержки медиазапросы:

https://litmus.com/help/email-clients/media-query-support/

Просто протестированы и работает

источник

2015-10-22 12:33:52 izorgor

Отключения этих значений/свойство, кажется, работает

.row { 
    margin: 0 auto; 
    /* padding: 15px; */ 
    max-width: 1040px; 
    width: 100%; 
} 

.colored-logo { 
    background: #989898; 
    height: 128px; 
    /* margin: 0px -15px 10px -15px; */ 
    padding: 15px; 
    width: 100%; 
}

Просто настроить в соответствии с требованиями вашего медиа запросов.

JSfiddle Demo

источник

2015-10-22 12:34:22

Отзывчивое поведение CSS для центрированного изображения

ответ

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