css +js 显示图片

CSS+JS可以很方便地用于在网站中展示图片，下面是一些相关代码示例：

/*CSS代码*/
.img-container{
     position:relative;
     width: 500px;
     height: 300px;
     margin: 0 auto;
     overflow: hidden;
}
.img-container img{
     position:absolute;
     top: 0;
     left:0;
     min-width:100%;
     min-height:100%;
}

/*JS代码*/
function preloadImage(){
     var imgObj = new Image();
     var imgSrc = "image.jpg";
     imgObj.src=imgSrc;
     if(imgObj.complete){
          //图片已经加载完成
          setImgSize();
     }else{
          //图片未加载完成，等待加载完成后再显示
          imgObj.onload=function(){
               setImgSize();
          }
     }
}
function setImgSize(){
     var imgWidth=imgObj.width;
     var imgHeight=imgObj.height;
     var containerWidth=document.querySelector(".img-container").clientWidth;
     var containerHeight=document.querySelector(".img-container").clientHeight;

     if(imgWidth/imgHeight > containerWidth/containerHeight){
          //宽度比例大于容器比例，以宽度为准缩放
          imgObj.width=containerWidth;
          imgObj.height="auto";
     }else{
          //宽度比例小于容器比例，以高度为准缩放
          imgObj.height=containerHeight;
          imgObj.width="auto";
     }
     document.querySelector(".img-container").appendChild(imgObj);
}

上述代码实现了一个实现了动态调整图片大小的图片展示器。首先我们需要一个容器来容纳图片，并通过 CSS 设置其宽、高及样式。接着，加载图片并判断其是否已经加载完成。如果图片已经加载完成，则直接调用一个函数进行缩放处理，否则我们需要在图片加载完成后再处理。缩放处理的方法很简单，我们只需要得到图片原始宽高比，比较其与容器的宽高比大小，然后按比例进行缩放即可。具体细节可查看上述代码。