Currently revamping my photography website and working on a simple slider to showcase some of my photos. Struggling with aligning the images in divs with padding all around while keeping them centered. I want to replicate the look of my photos on Instagram, where they are centered in squares but maintain their aspect ratio.
You can check out my Codepen here.
Here's an example of what I aim to achieve: https://i.stack.imgur.com/VEOYs.png
SCSS:
.slick-slider {
.image_container {
background: red;
position: relative;
overflow: hidden;
height: 256px;
padding: 20px;
img {
position: absolute;
top: 0; bottom: 0;
margin: 0 auto;
max-height: 300px;
left: 0; right: 0;
padding: 15px;
}
}
}
HTML:
<div class="slick-slider">
<div class="image_container">
<img src="http://cdn.jscotto.com/sites/joescottophotography.com/images/portraits/photo-portraits-1.jpg">
</div>
<div class="image_container">
<img src="http://cdn.jscotto.com/sites/joescottophotography.com/images/portraits/photo-portraits-2.jpg">
</div>
</div>