美文网首页
设置图片全屏且不变形(宽/高是div的100%)

设置图片全屏且不变形(宽/高是div的100%)

作者: zlf_j | 来源:发表于2023-09-06 16:30 被阅读0次
// 图片默认全屏,即宽或高100%
    // 获取div可视宽高(clientHeight,clientWidth)
    var largeImageBox = document.getElementById('largeImageBox')
    // 默认图片宽/高是全屏
    var inner = document.getElementById('largeImage')
    if (inner) {
      // 防止图片未加载完,宽高取值为0
      inner.onload = function () {
        // 电脑屏幕高=宽
        if (largeImageBox.clientHeight == largeImageBox.clientWidth) {
          // 高>=宽,图片高默认为div高度
          if (inner.height >= inner.width) {
            inner.style.height = largeImageBox.clientHeight + 'px'
          } else {
            // 高<宽,图片宽默认div宽度
            inner.style.width = largeImageBox.clientWidth + 'px'
          }
          // 电脑屏幕高<宽
        } else if (largeImageBox.clientHeight < largeImageBox.clientWidth) {
          // 高>=宽,图片高默认为div高度
          if (inner.height >= inner.width) {
            inner.style.height = largeImageBox.clientHeight + 'px'
          } else {
            // 确保图片高度不超过100%,超过则取高
            const newHeight =
              (largeImageBox.clientWidth * inner.height) / inner.width
            if (newHeight > largeImageBox.clientHeight) {
              inner.style.height = largeImageBox.clientHeight + 'px'
            } else {
              // 图片宽默认div宽度
              inner.style.width = largeImageBox.clientWidth + 'px'
            }
          }
        } else {
          // 电脑屏幕高>宽
          // 高>=宽,图片宽默认为div宽度
          if (inner.height >= inner.width) {
            inner.style.width = largeImageBox.clientWidth + 'px'
          } else {
            // 确保图片宽度不超过100%,超过则取宽
            const newWidth =
              (largeImageBox.clientHeight * inner.width) / inner.height
            if (newWidth > largeImageBox.clientWidth) {
              inner.style.width = largeImageBox.clientWidth + 'px'
            } else {
              // 图片高默认div高度
              inner.style.height = largeImageBox.clientHeight + 'px'
            }
          }
        }
      }
    }

参考:https://blog.csdn.net/azezeze/article/details/127300128

相关文章

  • div盒子宽高固定,图片正常显示

    div盒子大小固定,图片要求正常铺满显示 方法一:通过盒子设置宽、高,然后图片直接设置100%。这样小的图片,比例...

  • 宽高铺满整个屏幕

    一、使用100%设置宽高 1、先设置HTML的高度100%,再设置body高度100%,最后再设置div的高度10...

  • 微信小程序设置宽高100%不起作用

    小程序的启动页图片是要铺满全屏的,我们考虑设置宽高都是100%但是并没有起作用 添加page配置即可 参考文章:微...

  • 插入图片与背景图片的区别

    下面是两个同样没有宽高的div 区别1,在没有设置宽高的div中,背景图片并不会显示出来,而插入图片却可以显示出来...

  • 2019-06-27 参照浏览器宽度设置蒙层

    不管怎样,设置全屏的蒙层都要在body下一级元素设置,如果你没有设置html,body宽100%高100%的话,给...

  • html,css所遇问题(一)

    div中添加背景图片必须设置宽高 例如:下述代码没有设置icon的宽高值,那么网页中也不会显示出背景图片,因为di...

  • css 宽度与高度

    文档流(normal flow)div竖着排,内联元素横着排 块级元素div的宽高:未设置宽高时 宽:div的宽度...

  • img 自适应

    1.width:100%;高度自适应; 2.通过给div设置background实现自适应 优点:不会造成图片变形...

  • CSS实现全屏切换效果

    如何通过CSS使div实现全屏效果 全屏要素 全屏的元素及其父元素都要设置height:100% 将html、bo...

  • css: aspect-ratio 让元素的宽高比例缩放

    css设置div宽高按照10/1显示,无论这个div的宽怎么变化,div的高都会是宽的十分之一,这就是aspect...

网友评论

      本文标题:设置图片全屏且不变形(宽/高是div的100%)

      本文链接:https://www.haomeiwen.com/subject/ifnkvdtx.html