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