Центрировать вектор img в поле адаптивного div?

Question

Центрировать вектор img в поле адаптивного div?

0

У меня есть вектор img, который появляется с правильными размерами в гибком div-поле, используя этот css:

.col1 > div {
  width:100%;
  height:25%;
  position: relative;
}
.thisIMGcontainer {
  height: 100%;
  width: 100%;
  position: absolute;
  display: table;
}
.thisIMG {
  background-image: url('../img/thisIMG.png');
  background-size: contain;
  background-repeat: no-repeat;
}

Для этого HTML:

<div class="col1">
    <div class="box1">
      <div class="thisIMGcontainer"><div class="thisIMG"></div></div>
    </div><!--/box1-->
</div>

Я попробовал несколько комбинаций CSS, чтобы получить img, выровненный по центру, но он либо остается выровненным влево, либо он случайно исчезает!

display: table-caption; или отображение: встроенный блок; и margin: 0 auto;

StackThis 14 апр. 2014, в 04:30

Источник

0

Кстати, PNG - это не векторное изображение.
Andrei Volgin 14 апр. 2014, в 01:52
0

@AndreiVolgin спасибо за указание на это ... какие форматы?
StackThis 14 апр. 2014, в 02:27
0

Наиболее распространенный: SVG.
Andrei Volgin 14 апр. 2014, в 02:49

Показать ещё 1 комментарий

Теги:

html

css

image

responsive-design

center

1 ответ

Ещё вопросы

Кстати, PNG - это не векторное изображение.
@AndreiVolgin спасибо за указание на это ... какие форматы?

Andrei Volgin · Accepted Answer · 2014-04-13T23-47-00.000Z

У вашего изображения div нет ширины, поэтому он принимает всю доступную ширину - 100%. Если вы хотите, чтобы изображение было центрированным, вам нужно использовать тэг <img> вместо использования фонового изображения или вам нужно установить ширину в классе .thisIMG.

спасибо за совет .. даже удаляя все css, с <img> он просто заполняет блок div, показывая только верхнюю половину изображения?
Вам не нужен .thisIMGcontainer div вообще.