Having a problem to align images and change size

I have five images in a div with a class=“fotos”. each image has a id. I could not do how to alingn the five images horinzontally and change indepebdelly de style (size, border-color od each image). I am having troubles with css
Some could help me?
// code//

    <img   id="one" src="https://tinyurl.com/6dfrdtda">

    <img  id="two"  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLnpE5DdnWT86s0l1uVlOcMyeBCZIi1WZryw&usqp=CAU">

        

    <img id="three" src="https://tinyurl.com/4hep8csr">

    <img  id="four" src="https://tinyurl.com/chk5erzk" >

    <img  id="five"  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSusH86mzsCwPR3xrII4p8ubUI2lU5aSZep0A&usqp=CAU">

</div>

You would change the css of each individual img with #id selectors that target each img separately. If you were to do more responsive horizontal aligning, it would be easier with flexbox. If you are doing simple static stuff, img are already inline so a combination of height, width, and margin would suffice.

demo:

1 Like

For example, i want that all the images have the same border-radius, but each image will have different size, I am using visual studio code

Ah, then you would have an img selector that deals with the common attributes. Then #id selectors to deal with individual attributes such as height and width. Here in the case of border-radius, if you mean same as in same ratio, use units of %, else use px, rem, whatever.
e.g.

img {
   border-radius:10%; /*each img would have rounded edge of the same ratio*/
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.