How to resize, center align and make responsive a SVG file inside its parent div?

Question

I am trying to center an svg file into its parent div without success.

I have created this fiddle -> https://jsfiddle.net/wfukyd4q/

where you can see I did the following:

<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>

My goal is to make the svg let's say 50% and put it in the centre, but to be responsive for mobile devices too.

Thank you

@IrinaPotapova I did, but it makes sense only in the desktop. If you try it on mobile it looks tiny — EnexoOnoma, Dec 10 '18 at 14:23
it looks tiny because 50% of a mobilescreen is tiny. You can use a media query to adjust that — Naomi, Dec 10 '18 at 14:25
Hi its not technically an svg when you put it in an img tag. Just to let you know, if you wanted to adjust it like you would an svg — Craicerjack, Dec 10 '18 at 14:25
Possible duplicate of [How to make an image center (vertically & horizontally) inside a bigger div](https://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div) — Craicerjack, Dec 10 '18 at 14:26
Possible duplicate of [vertical center svg in div container](https://stackoverflow.com/questions/39420338/vertical-center-svg-in-div-container) — Rob, Dec 11 '18 at 14:24

Irina Potapova · Answer 1 · 2018-12-10T15:05:44.060

2

Let's say your image has class svg-image:

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

Please add css similar to this:

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

You can specify several @media queries for different screen sizes and apply desired width of the image.

EDIT:

To center your image vertically and horizontally you can add styles to your div (which wraps your image):

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

edited Dec 10 '18 at 15:05

answered Dec 10 '18 at 14:26

Irina Potapova

784
6
17

Thank you, but how i keep it centered? – EnexoOnoma Dec 10 '18 at 14:32
@EnexoOnoma, are asking about horizonal centering? – Irina Potapova Dec 10 '18 at 14:32
Vertically and horizontally – EnexoOnoma Dec 10 '18 at 14:34
@EnexoOnoma, flexbox should work https://caniuse.com/#feat=flexbox. Just need to add prefixes like here http://shouldiprefix.com/#flexbox. I've edited answer – Irina Potapova Dec 10 '18 at 15:04

Paul LeBeau · Answer 2 · 2018-12-11T14:39:55.147

The CSS background-* properties will do what you want.

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/

If this doesn't exactly behave how you want on mobile devices, then you can use media queries to tweak the CSS as needed for certain screen sizes.

Philip Bowler · Answer 3 · 2018-12-10T14:41:37.080

0

Have you tried giving the image element an Id then referencing that element inside of your CSS like so:

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

where your img tag has an example id of 'foo'

Update:

You might need to change the position of your parent like so:

  #parent {
    position: absolute

   }

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

edited Dec 10 '18 at 14:41

answered Dec 10 '18 at 14:27

Philip Bowler

61
8

It does not center the image inside the div – EnexoOnoma Dec 10 '18 at 14:34

score 0 · Answer 4 · answered Dec 11 '18 at 14:23

Yet an other way of doing it:

.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>

How to resize, center align and make responsive a SVG file inside its parent div?

4 Answers4