Question

我有响应的图像，并且在页面中间垂直和水平居中。但是问题是当我缩小图像时，它在1014px宽度后变小。如何使其大于1014px？我想要它以后会变小，因为左右之间仍然有间隙。

位置应固定，因为稍后我将在左侧添加可滚动的导航菜单。当此图像容器的位置为fixed时，该导航应该是可滚动的

为使您更好地理解我的问题，请参见下图

 *,*::after,*::before{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html,body{
    font-size:62,5%;
    height: 100%;
    background-color: #000;
}
 body{
    box-sizing: border-box;
} 
 .responsive {
    width: 100%;
    height: auto;
  }
  .imgContainer{
    max-width: 900px;
    overflow: hidden;
    border: 4px solid yellow;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
        <link rel="stylesheet" href="css/icon-font.css">
        <link rel="stylesheet" href="/styles.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png">
        
        <title>ImageProcessing Project</title>
    </head>
    <body>
             <div class="imgContainer">
                  <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Nature" class="responsive">
            </div>
</body>
</html>

Answer 1

请不要在容器中设置max-width并设置宽度（以百分比为单位）（例如90％）。然后将其添加到图像width:100%中，应该完成

*,*::after,*::before{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html,body{
    font-size:62,5%;
    height: 100%;
    background-color: #000;
}
 body{
    box-sizing: border-box;
} 
 .responsive {
    width: 100%;
    height: auto;
  }
  .imgContainer{
    overflow: hidden;
    border: 4px solid yellow;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:90%;
  }
  img  {width:100%}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
        <link rel="stylesheet" href="css/icon-font.css">
        <link rel="stylesheet" href="/styles.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png">
        
        <title>ImageProcessing Project</title>
    </head>
    <body>
             <div class="imgContainer">
                  <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Nature" class="responsive">
            </div>
</body>
</html>

Answer 2

将最大宽度更改为500px（与图像宽度相同），然后将width: 100%添加到.imgContainer元素。

.imgContainer {
    max-width: 500px;
    overflow: hidden;
    border: 4px solid yellow;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

此外，默认情况下，更改img（块）的显示以删除下面的多余空间。

.responsive {
    display: block;
}

如何设置固定容器中图像的最小宽度？

2 个答案: