У меня есть изображение, которое реагирует и центрируется по центру страницы по вертикали и горизонтали. Но проблема в том, что когда я делаю его меньше, его становится меньше после ширины 1014 пикселей. Как я могу сделать его больше, чем 1014 пикселей? Я хочу его позже будет меньше, так как слева и справа еще будет промежуток.
Положение должно быть исправлено, потому что я собираюсь добавить прокручиваемое меню навигации слева влево. И эта навигация должна быть прокручиваемой, когда этот контейнер изображения имеет 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>