上传时桌面上的垂直图像在网页上显示为水平

Question

我正在尝试从头开始建立一个网站来展示我的作品。我使用的是简单的 css 和 html。我的原始图像方向是桌面上的垂直或纵向格式，并且打算采用该格式。但是，当通过 HTML 在 notepad++ 上从桌面上传时，它似乎是水平或横向格式。我使用基本的简单 HTML 来上传图像。代码如下：

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

有没有人以前遇到过这个问题？任何解决方案？

*需要注意的是，几年前我在使用 Other People's Pixels 一个艺术家和设计师的作品集网站时遇到了类似的问题。

Answer 1

没有任何代码示例，这是暗中操作。

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" />

通过给 img 一个定义的大小并告诉 object-fit 包含图像，它将适合容器并保持其纵横比

上传时桌面上的垂直图像在网页上显示为水平

Vertical image on desktop when uploaded appears horizontal on webpage

html

css

google-web-designer