图像和段落无法在移动设备上正确显示答案

【问题标题】：Image and paragraph not dispalying properly on mobile图像和段落无法在移动设备上正确显示
【发布时间】：2017-09-05 18:08:32
【问题描述】：

图像在最右侧，页脚覆盖文本。当我在移动设备上查看网站时会发生这种情况。我该怎么做才能做到这一点？这是网站： www.ferskvaregrossisten.no

img{
      width:100%;
      width:150px;
      length:150px;
      -webkit-transform:rotate(270deg);
      -moz-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      transform: rotate(270deg);
      position:absolute;
      left:690px;
      top:320px;
    }

    footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #efefef;
    text-align: center;
    width:100%;
    }

    p{
      height: 40%;
     width: 100%;
     display: flex;
     position: fixed;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     width:100%;
    }

【问题讨论】：

标签： css responsive-design responsive responsive-images

【解决方案1】：

你已经绝对定位了 img 元素。您想使用普通定位（默认为静态），并使用

将元素居中

img{
  display:block;
  margin: 0 auto;
  // I added the following rules to constrain the size of the image 
  max-width: 300px;
  height: auto;
}

这是一个代码笔。 https://codepen.io/NeilWkz/pen/XaQNEN

【讨论】：