Project Images in the portfolio

Project Images in the portfolio
0.0 0

#1

Hi, I am wondering why my images are not aligned and not same sizes…
https://kijimu7.github.io/MyPortfolio/

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!


#2

Haisai~

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('https://user-images.githubusercontent.com/31402838/30770903-fa022596-9ff0-11e7-98b2-483679316839.jpg');"></div></a>
  <a href="#"><div class="img" style="background-image:url('https://user-images.githubusercontent.com/31402838/30771154-8f38aa32-9ff5-11e7-90a2-0ccc9433a961.jpg');"></div></a>
  <a href="#"><div class="img img-pixel" style="background-image:url('https://user-images.githubusercontent.com/31402838/38962871-3659d788-4324-11e8-8f23-e9ad96cd1d6c.jpg');"></div></a>
</div>

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="https://kijimu7.github.io/tribute/" target="_blank">
       <img class="mySlides" src="https://user-images.githubusercontent.com/31402838/30770903-fa022596-9ff0-11e7-98b2-483679316839.jpg" alt="tribute"></a>
        
       <a href="https://kijimu7.github.io/Portfolio2/" target="_blank">
        <img class="mySlides" src="https://user-images.githubusercontent.com/31402838/30771154-8f38aa32-9ff5-11e7-90a2-0ccc9433a961.jpg" alt="portfolio">><!-- here --></a>
       
       <img class="mySlides" src="https://user-images.githubusercontent.com/31402838/38962871-3659d788-4324-11e8-8f23-e9ad96cd1d6c.jpg" alt="pixelartmaker">><!-- here -->

                 <img class="mySlides" src="https://user-images.githubusercontent.com/31402838/31026847-be5946a8-a4fc-11e7-800a-b90c71ab045f.jpg">
           
       <img class="mySlides" src="https://user-images.githubusercontent.com/31402838/31026847-be5946a8-a4fc-11e7-800a-b90c71ab045f.jpg">
         
       <img class="mySlides" src="https://user-images.githubusercontent.com/31402838/31026847-be5946a8-a4fc-11e7-800a-b90c71ab045f.jpg">
       </div>
</div>

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:


#3

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?