问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css如何实现图片尽可能放大

头像
q9tb7ntu
    22716

    image

    现在的代码是

        width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    图片大的话，它会自动缩小，但是如果图片小于盒子大小，就不会进行放大了（如图），怎么办。放大保证不失真，任何一边触碰到父盒边缘就不放大了。

    前端htmlcsshtml5
    阅读 2.5k
    3 个回答
    得票最新
    头像
    zangeci
      14.8k71731
      ✓ 已被采纳
      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      margin: auto;
      width: 300px;
      height: 400px;
    }
    #image {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  </style>
</head>
<body>
  <div id="container">
    <img id="image" src="https://tse2-mm.cn.bing.net/th/id/OIP.6q0DYSIPBOoMYtN8ee8G4QHaE5?w=266&h=180&c=7&o=5&dpr=2&pid=1.7">
  </div>
</body>
</html>

      是你要的效果不

      头像
      Fractal
        5.5k22433

        css background-size : contain or cover

        头像
        Max迪丶先生
          1.8k11324

          拿了上面的的代码，重新改了另一种，看哪种合适：

          <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      margin: auto;
      width: 100%;
      height: 400px;
    }
    #image {
      width: 100%;
      height: 100%;
      object-position: center;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div id="container">
    <img id="image" src="https://tse2-mm.cn.bing.net/th/id/OIP.6q0DYSIPBOoMYtN8ee8G4QHaE5?w=266&h=180&c=7&o=5&dpr=2&pid=1.7">
  </div>
</body>
</html>

          效果图

          image.png

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题