I am trying to build a website from scratch to show case my artwork. I am using simple css and html. My original image orientation is vertical or portrait format on the desktop and is intended to be in that format. However, when uploaded from the desktop via HTML on notepad++ it appears to be horizontal or landscape format. I used basic simple HTML to upload the image. Code Below:
<img src="Paintings/OystersTopoChico.jpg" alt="OystersTopoChico"
title="Oysters and Topo Chico" width="500" height="377"./>
Has anyone ever experienced this issue before? Any solutions?
*It should be noted that I experienced a similar problem a couple of years ago using Other People's Pixels a portfolio website for artists and designers.
Without any code samples, this is a stab in the dark.
body {
margin: 0;
}
img {
width: 250px;
height: 250px;
object-fit: contain;
/* these rules below are not needed */
border:1px solid red;
display:inline-flex;
padding:5px;
}<img src="https://www.technowalkers.com/wp-content/uploads/2017/10/html.jpg" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2000px-HTML5_logo_and_wordmark.svg.png" />By giving the img a defined size and telling the object-fit to contain the image, it will fit in the container and maintain its aspect-ratio