Как изменить размер, выровнять по центру и адаптировать SVG-файл внутри родительского div?

Question

Я пытаюсь центрировать файл svg в родительском div безуспешно.

Я создал эту скрипку -> https://jsfiddle.net/wfukyd4q/

, где вы можете видеть, что я сделал следующее:

<div class="col-md-10 col-md-offset-1 col-sm-12 text-center">
    <div style="background-color:#489734;height:500px">
         <img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/compose_music_ovo2.svg">
    </div>
</div>

Моя цель - сделать svg, скажем, 50%, и поместить его в центр, но также реагировать и на мобильные устройства.

Спасибо

Answer 1

Еще один способ сделать это:

.col-md-10{position:relative;}
.col-md-10 img{
  display:block;
  width:50%;
  height:auto;
  position:absolute;
  margin:auto;
  top:0;bottom:0;right:0;left:0;
}

<div class="col-md-10 col-md-offset-1 col-sm-12 text-center">
                <div style="background-color:#489734;height:500px">
                    <img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/compose_music_ovo2.svg">
                </div>

</div>

Answer 2

Вы пытались присвоить элементу изображения идентификатор, а затем ссылаться на этот элемент внутри вашего CSS следующим образом:

div#foo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

, где ваш тег img имеет примерный идентификатор 'foo'

Обновление:

Возможно, вам потребуется изменить положение вашего родителя следующим образом:

  #parent {
    position: absolute

   }

div#foo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

Answer 3

Свойства CSS background-* будут делать то, что вы хотите.

div.text-center div {
  background-color: #489734;
  height: 500px;
  background-image: url("https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/compose_music_ovo2.svg");
  background-size: auto 50%;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="col-md-10 col-md-offset-1 col-sm-12 text-center">
  <div></div>
</div>

https://jsfiddle.net/wfukyd4q/7/

Если это не совсем так, как вы хотите на мобильных устройствах, то вы можете использовать медиа-запросы для настройкиCSS, необходимый для определенных размеров экрана.

Answer 4

Допустим, ваше изображение имеет класс svg-image:

<img class="svg-image" src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/compose_music_ovo2.svg">

Пожалуйста, добавьте css, похожую на эту:

.svg-image {
    width: 50%;
}
@media only screen and (max-width: 992px) {
    width: 90%;
}

Вы можете указать несколько @media запросов для экранов разных размеров.и примените желаемую ширину изображения.

РЕДАКТИРОВАТЬ:

Чтобы центрировать изображение по вертикали и горизонтали, вы можете добавить стили к вашему div (который оборачивает ваше изображение):

.class-of-your-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    justify-content: center;
    align-items: center;
}