如何在固定大小的100x100 div中显示任意大小的图像？

Question

我希望以固定大小（100px x 100px）div显示任意大小（不同宽度和高度）的图像，而不改变其宽高比。我还想将图像对齐div中的中心。我研究过它，但不同的宽度和高度（第6个）的图像不会出现在中心，除非我改变其宽高比。

router.post('/authorize', function(req, res){
request({
    method: 'POST',
    url: 'https://secure.snd.payu.com/pl/standard/user/oauth/authorize',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: "xyz"
},  function (error, response, body) {
        console.log('Status:', response.statusCode);
        console.log('Headers:', JSON.stringify(response.headers));
        console.log('Response:', body);
        res.send(body); //Here I get necessary Bearer key
  }
)}


router.post('/paynow', function(req, res){
   request({
method: 'GET',
url: 'https://secure.snd.payu.com/api/v2_1/paymethods/',
headers: {
    'Authorization': 'Bearer number'
}}, function (error, response, body) {
        console.log('Status:', response.statusCode);
        console.log('Headers:', JSON.stringify(response.headers));
        console.log('Response:', body);
        res.send(body);
}

下面的图片：

Answer 1

请改用背景图片。当你需要一个图像来掩盖整个div而不是改变宽高比时，这是最简单的。

element {
    background-repeat:no-repeat;
    background-position: center;
    background-image:url(image.jpg);
    background-size: cover;
}

Answer 2

将max-width和max-height用于CSS中的img标记。

＆＃13;

＆＃13;

img {
    display: block;
    max-width:180px;
    max-height:180px;
    width: auto;
    height: auto;
}

＆＃13;

<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

＆＃13;

＆＃13;

＆＃13;

图像的原始大小为400x400像素，但您可以通过CSS调整大小，而不会更改宽高比。 <img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

另一个选项：

如果您想将父div添加到图片中，那么您可以这样做：

＆＃13;

＆＃13;

.container {
    width: 100px;
}

.container img {
    display: block;
    width: 100%;
    height: auto;
}

＆＃13;

<div class="container">
    <img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

对比例视图使用相同的宽度和高度，即（100x100）。