使用HTML/CSS搭建艺术网站：桌面竖图上传后显示为横版的问题

Hey there! Let’s break down why your portrait art images are showing up sideways and how to fix it—super common issue when working with photos from phones/cameras.

First: Fix the Obvious HTML Typo #

Looking at your code snippet, you have a typo in the height attribute (heigh... instead of height). Browsers ignore invalid attributes, so it’s scaling your image only using the width you set, which distorts the aspect ratio and makes it look landscape. Correct that first:

<img src="Paintings/OystersTopoChico.jpg" alt="OystersTopoChico" title="Oysters and Topo Chico" width="500" height="auto">

Using height="auto" tells the browser to calculate the correct height based on the image’s natural aspect ratio, so it won’t get stretched or squashed.

The Root Cause: EXIF Orientation Data #

Here’s the bigger issue: Your desktop image viewer is probably respecting hidden EXIF metadata in the image file that says “rotate this 90 degrees,” but most browsers don’t automatically do this. So even though the image looks portrait on your computer, the actual pixel data is stored in landscape orientation.

Permanent Fix: Edit the Image File #

You need to apply the rotation directly to the image’s pixel data so browsers display it correctly without relying on EXIF. Use any basic image editor:

• Windows: Right-click the image → Edit with Photos → Click the rotate icon until it’s portrait → Save.
• Mac: Open in Preview → Click the rotate toolbar icon → File → Export (this saves the rotated pixel data).
• Photoshop/GIMP: Image → Image Rotation → Select the correct rotation → Save over the original or a copy.

Re-upload this edited image, and it will display as portrait on your site without any extra code.

Optional CSS Workaround (If You Can’t Edit the Image) #

If you need a quick fix without re-editing the image, use CSS to rotate it:

<img src="Paintings/OystersTopoChico.jpg" alt="OystersTopoChico" title="Oysters and Topo Chico" width="500" height="auto" class="portrait-art">

Add this CSS to your stylesheet:

.portrait-art {
  transform: rotate(90deg); /* Use 270deg if it’s rotated the other way */
  /* Adjust positioning to avoid overlapping content */
  transform-origin: top left;
  margin: 150px 0; /* Tweak this based on your image size */
}

Note: This is a band-aid solution—it doesn’t fix the actual image data, so editing the image file is always better for performance and consistency.

内容的提问来源于stack exchange，提问作者ICW