响应式图像全屏和居中 - 保持纵横比，不超过窗口

4 回答

• 3

  jsFiddle Demo

  要使其居中，您可以使用此处显示的技术：Absolute centering .

  为了使它尽可能大，请给它 max-width 和 max-height of 100% .

  .className {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 100%;
      max-height: 100%;
      margin: auto;
      overflow: auto;
  }
  

  回复于 2024-05-12T23:26:31+08:00
• 70

  您可以使用带有背景图像的 div 和此CSS3属性：

  background-size: contain

  您可以查看以下示例：

  https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain

  引用Mozilla：

  包含值指定无论包含框的大小如何，都应缩放背景图像，使每个边尽可能大，同时不超过容器对应边的长度 .

  但是，请记住，如果 div 大于原始图像，则会对图像进行放大 .

  回复于 2024-05-12T23:26:31+08:00
• -1

  经过大量的反复试验，我发现这解决了我的问题 . 这用于通过浏览器在电视上显示照片 .

  • 它保持照片长宽比

  • 垂直和水平刻度

  • 纵向和横向居中

  • 唯一需要注意的是真正的宽图像 . 它们可以拉伸以填充，但不是很多，标准相机照片不会改变 .

  试试看 ：）

  *到目前为止仅在镀铬中测试过

  HTML：

  <div class="frame">
    <img src="image.jpg"/>
  </div>
  

  CSS：

  .frame {
    border: 1px solid red;
  
    min-height: 98%;
    max-height: 98%;
    min-width: 99%;
    max-width: 99%;
  
    text-align: center;
    margin: auto;
    position: absolute;
  }
  img {
    border: 1px solid blue;
  
    min-height: 98%;
    max-width: 99%;
    max-height: 98%;
  
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  

  回复于 2024-05-12T23:26:31+08:00
• 1

  yourimg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  }
  

  并确保没有位置的父标签：相对于它

  回复于 2024-05-12T23:26:31+08:00