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

时间:2018-05-03 18:34:15

标签: html css google-web-designer

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

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

以前有没有人遇到过这个问题?有解决方案吗

*应该注意的是,几年前我使用其他人的像素作为艺术家和设计师的投资组合网站遇到过类似的问题。

1 个答案:

答案 0 :(得分:0)

没有任何代码示例,这是一个黑暗中的刺。

&#13;
&#13;
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;
}
&#13;
<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" />
&#13;
&#13;
&#13;

通过给img一个定义的大小并告诉对象适合包含图像,它将适合容器并保持其宽高比