Project Images in the portfolio

Hi, I am wondering why my images are not aligned and not same sizes…

Can anybody tell me how I can align the same position and same sizes?
Do I need edit sizes every time?
How is everybody doing this projects section?

Thank you!


If you are referring to the images themselves of not being the same size and height, here is one way you could do it (reference)—you could consider changing the images as <img>s to background images of <div>s first:

<div class="container">
  <a href="#"><div class="img" style="background-image:url('');"></div></a>
  <a href="#"><div class="img" style="background-image:url('');"></div></a>
  <a href="#"><div class="img img-pixel" style="background-image:url('');"></div></a>

This method allows you to take advantage of the CSS properties specific to background images:

.container {
  display: flex;
  /* Align images inside the container horizontally */
  justify-content: space-around;

.img {
  height: 16.6vw;
  width: 30vw;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;

.img-pixel {
  background-position: 50% 10%;

EDIT: accidentally posted before finishing at this point earlier!

The styling works by taking advantage of background-size: cover, which scales the image to fit either the height or the width of the container depending on which is larger. The background-position property allows you to adjust the position of the background image within a <div>; in cases where your image is not quite centered, such as the pixel-art maker one, you will have to manually adjust it (see the .img-pixel class).

It should be noted that this method assumes that your images are optimally sized relative to each other. Also, the code above is only a simplified version of a part of your layout—you will have to make other changes in order to incorporate it into your design. I think you will benefit from using a Frid (Flexbox + CSS Grid) layout at least for that part of your portfolio.

I noticed that you are linking to style sheets outside of the <header> element—I think this is non-standard. There are also some <a> elements that are not properly closed the code below (see comments), you will benefit a lot from using an HTML validator!

     <div class="works">
        <div id="niko"></div>
       <a href="" target="_blank">
       <img class="mySlides" src="" alt="tribute"></a>
       <a href="" target="_blank">
        <img class="mySlides" src="" alt="portfolio">><!-- here --></a>
       <img class="mySlides" src="" alt="pixelartmaker">><!-- here -->

                 <img class="mySlides" src="">
       <img class="mySlides" src="">
       <img class="mySlides" src="">

I like the design in general but I personally think that there are a lot of alignment adjustments to be made (such as the top section where the introduction and the Shiisaa is—it could move to the right a bit), since you may move to a Frid layout, I’ll leave it at that for now!

Good luck! :smile:

Hi, honmanyau. Thank you so much for your explanation. It is really helpful, I will try to use the background-image.
Have you been Okinawa?