Vertical image on desktop when uploaded appears horizontal on webpage

Question

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.

post the code you have tried, without seeing it would be pure speculation on what to do — mlegg, May 03 '18 at 18:36
Do post the screenshot where you seeing image horizontal to vertical or vice versa. — Santosh, May 03 '18 at 18:37

score 0 · Accepted Answer · answered May 03 '18 at 18:52

0

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

answered May 03 '18 at 18:52

Christian4423

1,746
2
15
25

1

Just uploaded the code to question. Sorry I am a newbie at stackoverflow! – ICW May 03 '18 at 18:58
When I use that code. It just shows up as text on a web page beside my image. How do I use that code to reference my image. Thanks for being patient. – ICW May 03 '18 at 20:13
Sorry, I didnt see your comment. You are referring to my css? If you are putting it in your html, wrap it in a style tag `` otherwise you will put the css into a CSS file and link to it from the html – Christian4423 May 04 '18 at 15:02
It turns out that meta data has to be stripped from the image file using a certain program. Pretty complex issue. I recently talked to web designer who experienced the same issue. He gave me the solution a couple of days ago. Thank you so much though. – ICW May 22 '18 at 21:19

Vertical image on desktop when uploaded appears horizontal on webpage

1 Answers1