我如何在盒子的中心插入不同大小的图像？

我怎样才能插入不同大小的图像框中心？图片有不同的大小。纵向（高度比宽度大），横向（宽度比高度大），方（宽度是相同的高度）和红色箱具有可转换的大小。（不仅正方形）我如何在盒子的中心插入不同大小的图像？

我用这样的代码

HTML

<div class="image"> 
    <img class="image_insert" src=".."> 
</div>

CSS

.image{ 
    position:relative; 
    width:100px; 
    height:100px; 
    overflow:hidden; 
} 

.image_insert{ 
    max-width:100%; 
    position:absolute; 
    margin:auto; 
    left:50%; 
    -webkit-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    transform:translateX(-50%); 
    top:0; 
    bottom:0; 
    }

的JavaScript

function imageControl(){ 
var image = document.getElementsByClassName('image_insert'); 
var array = new Array(); 

for(var i=0; i<image.length; i++){ 
    if(image[i].width>image[i].height){ 
    $(image[i]).css("max-width","none"); 
    $(image[i]).css("height","100%"); 
    } 
    } 
}

它的工作。但这种方式取决于文档（图像，JavaScript）的加载时间，所以有什么最好的方式来插入不同大小的图像在盒子的中心？ *内部没有空白的红色框！

来源

2017-01-02 Jung Yoon Kim

看到这一点，会帮助你http://jsfiddle.net/ marvo/3k3CC/2/ – user7357089

那么你想要隐藏边界的外部图像？ – aavrug

你想要的是使用<picture>HTML element tag，适用于各种情况（例如风景vs portait，屏幕分辨率/ DPI等）的媒体查询。浏览器会自动加载适当的图像。

This blog post应该给出一些额外的使用方法。

来源

2017-01-02 07:24:09 Derek

使用直列柔性框对齐图像，我创造了这个小提琴显示使用https://jsfiddle.net/swvdfzax/

的CSS将

div.image{ 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    border:2px solid red; 
    height:60px; 
    width:60px; 
    vertical-align:top 
} 
div.image img{ 
    max-height:100%; 
    max-width:100%; 
}

和HTML将

<div class="image"><img src="...path/to/image"></div>

来源

2017-01-02 07:24:56

试试这个。

.image { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.img-rectangle { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    border: 5px solid #BC2424;; 
 
    width: 100px; 
 
    height: 150px; 
 
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<div class="image"><img src="http://lorempixel.com/300/400/" /><div class="img-rectangle"></div></div> 
 
<div class="image"><img src="http://lorempixel.com/400/300/" /><div class="img-rectangle"></div></div> 
 
<div class="image"><img src="http://lorempixel.com/400/400/" /><div class="img-rectangle"></div></div>

来源

2017-01-02 07:26:26 aavrug

试试这个代码

$(function(){ 
 
\t $(".image_insert").each(function(){ 
 
    \t var container = $(this).parent(); 
 
    var img = $(this); 
 
    \t img.css({ 
 
    \t left: -1 * (img.width()/2 - container.width()/2), 
 
     top: -1 * (img.height()/2 - container.height()/2)  
 
    }); 
 
    }); 
 
});

.image{ 
 
    position:relative; 
 
    width:200px; 
 
    height:200px; 
 
    overflow:hidden; 
 
    border: 1px solid red; 
 
} 
 

 
.image_insert{ 
 
    position:absolute; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="image"> 
 
    <img class="image_insert" src="http://lorempixel.com/300/400/"> 
 
</div> 
 
<div class="image"> 
 
    <img class="image_insert" src="http://lorempixel.com/400/300/"> 
 
</div> 
 
<div class="image"> 
 
    <img class="image_insert" src="http://lorempixel.com/400/400/"> 
 
</div>

JSFiddel演示这里https://jsfiddle.net/g868ae1h/1

来源

2017-01-02 07:38:26 Sasikumar

我如何在盒子的中心插入不同大小的图像？

回答

相关问题