The issue with picture display differences between my phone and computer
When viewing pictures on my mobile browser, the height of the images appears stretched compared to when viewed on a computer.
🡐 Computer view | Phone view (iPhone 6s, same issue in both Safari and Chrome) 🡒
HTML
<div class="pic-wrapper">
<img src="img.png">
</div>
CSS
.pic-wrapper {
margin-bottom: 30px;
/* necessary for hover effect */
position: relative;
overflow: hidden;
}
.pic-wrapper img {
width: 100%;
height: auto;
}