Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ignacio Andres Rumbo
Ignacio Andres Rumbo
6,638 Points

pseudo-element image size

hi comunity!! i was practicing the structural elements. in the browser, when i see the result, the image is too large.

i got the next piece of code::

<section class="contenidoPrincipal"> <div class="contenedorInformacion" > <nav class="sectionNav"> <ul> <li class="impresionProductores"><a href="secctions/productores.html">Productores</a></li> <li class="impresionClientes"><a href="secctions/clientes.html">Clientes</a></li> </ul> </nav> </div> </section>

the question is:: how i can manipulate size of my svg? is conditioned by another class of an element previously declarated?

thanks guys! greetings form Arg.

rdaniels
rdaniels
27,258 Points
rdaniels
rdaniels
27,258 Points

The size would be controlled in your CSS page, with margin and padding widths and heights...

3 Answers

Ignacio Andres Rumbo
Ignacio Andres Rumbo
6,638 Points

thanks Lakindu!!

sizwengubane
sizwengubane
15,244 Points

Did it work? then please mark my answer as the best answer...so i get points ^_^. thanks

sizwengubane
sizwengubane
15,244 Points
sizwengubane
sizwengubane
15,244 Points

Hello, if the image size is too big, you should make the image a fluid image using the codde below <blockquotes>

img {
  max-width: 100%;
  width: 600px;
  height: 400px;
}

</blockquotes> max-width: 100% is very important because it adjusts the image size according to your browser's width and thus making a FLUID image. you can also give any width and height you want to give your images, this is just an example...this code will also apply to all svg images. if i managed to help u, rate my answer as the best

Ignacio Andres Rumbo
Ignacio Andres Rumbo
6,638 Points
Ignacio Andres Rumbo
Ignacio Andres Rumbo
6,638 Points

but.. the img is not part of the DOM. is generated by css rule.

.impresionProductores a::before { content: url(../img/icon_productores.svg); display: inline; }

.impresionClientes a::before { content: url(../img/icon_clientes.svg); display: inline; }

sizwengubane
sizwengubane
15,244 Points

add my coding for the above selectors like this <blockquotes>

.impresionProductores a::before { 
content: url(../img/icon_productores.svg); 
display: inline-block;
max-width: 100%;
width: 600px;
height: 400px;
} 
.impresionClientes a::before { 
content: url(../img/icon_clientes.svg); 
display: inline-block;
max-width: 100%;
width: 600px;
height: 400px;
}

</blockquotes> Hope this works