Question

我正在构建一个响应式网站，我有一个图像，我希望有一个固定的高度，但随着窗口折叠，图像保持居中，因为容器宽度减小。我已经尝试了几件事情并且我已经修复了高度，但是当图像宽度小于100％时，图像不会集中。

非常感谢任何帮助。

由于

.container { 
    
    overflow: hidden; 
}
.container img { 
    width: auto;
    height: 550px; 
}

   <div class="container">
     <img src="http://placehold.it/500x550" alt="alt" />
</div>

Answer 1

在这里看到你的身高是固定的，但也有反应。我只是给出一个示例图像。将此类添加到您的图片class="img-responsive"

中

.container { 
    overflow: hidden; 
}
.container img { 
    height: 550px; 
}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
     <img src="http://media1.santabanta.com/full1/Miscellaneous/Cartoon%20Characters/cartoon-characters-14a.jpg" alt="alt" class="img-responsive" >
</div>

将具有固定高度的响应图像居中

1 个答案: