html - Div 内容不应自动缩放

标签 html css

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 6 年前

.content 宽度与 .box 并且不小。

.box {
  width: 95%;
  background-color: red;
  padding: 20px;
  text-align: center;
  margin: 55px auto 40px;
}
.content {
  display: inline-block;
  text-align: center;
  width: 530px;
  height: 500px;
  padding: 57px 40px 0;
  background-color: #e9e9e9;
  height: 800px;
  box-sizing: border-box;
}
<div class="box">
  <div class="content">
    <img src="images/image.png" alt="">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>

最佳答案

width 设置为 100% 并添加 min-width: 530px; 如果宽度不是,您的 .content 将缩放 小于 .box

.box {
  width: 95%;
  background-color: red;
  padding: 20px;
  text-align: center;
  margin: 55px auto 40px;
}
.content {
  display: inline-block;
  text-align: center;
  min-width: 530px;
  width:100%;
  height: 500px;
  padding: 57px 40px 0;
  background-color: #e9e9e9;
  height: 800px;
  box-sizing: border-box;
}
<div class="box">
  <div class="content">
    <img src="images/image.png" alt="">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>

关于html - Div 内容不应自动缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40891230/

上一篇:css - 如何让 td 表格单元格跨越表格的整个宽度?

下一篇:javascript - 更改 JQuery 选项卡 slider 上的图像大小

相关文章:

定位元素中的 CSS 问题

javascript - 如何溢出自动聚焦最后一个元素

html - transform rotate 将 div 推离屏幕并变得不可见

html - 使用 HTML 和 CSS 的 SVG 剪辑路径问题

javascript - 以编程方式格式化谷歌图表

javascript - 切换按钮动画

html - 伪类的 CSS 问题

javascript - 如何使用 angular.js 添加/删除更改 'disabled' 或 'checked' 属性

html - 如何删除列表项下方的神秘空白

html - 在CSS中做形状 Angular