时间戳

首页 > 解决方案 > 上传时桌面上的垂直图像在网页上显示为水平

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

问题描述

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

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

有没有人遇到过这个问题？有什么解决办法吗？

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

标签： htmlcssgoogle-web-designer

解决方案

没有任何代码示例，这是在黑暗中刺伤。

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 包含图像，它将适合容器并保持其纵横比

推荐阅读