当子元素图像按百分比调整大小时，如何调整父级大小？

Question

我有一个块级元素，它有一个“图像”作为子元素。当我按百分比缩小图像时，块级元素不适合图像的新大小，但是块级父元素保持子图像的 100% 位置。

我希望父元素尊重大小，因为我以百分比更改子元素大小。这是显示问题的链接：

http://codepen.io/rosn/pen/ZOoGgm

codepen html：

<a href="#">
  <img src="https://s-media-cache-ak0.pinimg.com/236x/f6/35/e7/f635e7cdfcf59c09236a44df28f53d92.jpg" alt="" />
</a>

codepen css：

a{
  display: inline-block;
  border: 1px solid red; 
}

img{
    width: 70%;
    border: 1px solid blue;
}

尝试在 Bootstrap 中解决的问题： 更准确地说，这个问题是在引导导航中引起的，当时我在“navbar-brand”中应用了更大的图像。当我减小屏幕尺寸时，“navbar-brand”在“nav-collapse”按钮下方流动，如图所示。

为了使徽标变小并适合与“导航折叠”按钮在同一行中，我尝试使用媒体查询以百分比为单位缩小图像，但是以红色边框显示的父级不会与缩小图像。

这里是实际问题的引导代码链接： http://codepen.io/rosn/pen/JKvGvr?editors=1100

这个屏幕截图显示了使用百分比宽度以小尺寸下降的徽标图像。请减小屏幕宽度，您将重现该问题。

Answer 1

1) 图片

1. vw是窗口宽度的百分比； % 是父块宽度的百分比。 In your codepen <a> 块是图像的父块。所以70% 只是意味着70% of the width of the <a>。因此，图像右侧的空白空间不是问题。这是您要求的行为。

2. 您可以使用媒体查询来控制图像在不同尺寸屏幕上的宽度。例如：

   img { width: 30vw; } }
   @media (min-width: 481px) { img { width: 20vw; } }
   @media (min-width: 768px) { img { width: 10vw; } }
   

3. 默认情况下，图像的 display 属性值为 inline。因此，父块的边界偏离图像的下边缘。所以你需要重新定义这个属性为block。

4. 在演示中，我更喜欢使用the outline property 而不是border 属性：

   大纲不占用空间，它们绘制在内容之上。

http://codepen.io/glebkema/pen/wWjrWN

a {
  display: inline-block;
  outline: 1px solid red; 
}

img {
  display: block;
  outline: 1px solid blue;
  width: 30vw;
}
@media (min-width: 481px) { img { width: 20vw; } }
@media (min-width: 768px) { img { width: 10vw; } }

<a href="#">
  <img src="https://s-media-cache-ak0.pinimg.com/236x/f6/35/e7/f635e7cdfcf59c09236a44df28f53d92.jpg" alt="" />
</a>

2) 引导

1. 您可以以像素为单位设置图像大小，父块将调整为：

   http://codepen.io/glebkema/pen/grzPyN

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.navbar-brand {
  outline: 1px solid red;
  padding: 0 15px;
}
  
.navbar-brand img {
  outline: 1px solid blue;
  width: 50px;
}

<div class="jumbotron">
  <div class="container">

    <nav class="navbar navbar-default">
      <div class="container-fluid">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">	
            <img src="https://s-media-cache-ak0.pinimg.com/236x/f6/35/e7/f635e7cdfcf59c09236a44df28f53d92.jpg" alt="" />
          </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">home<span class="sr-only">(current)</span></a></li>
            <li><a href="#">our services</a></li>
            <li><a href="#">tour package</a></li>
            <li><a href="#">custom tour</a></li>
            <li><a href="#">travel partners</a></li>
            <li><a href="#">contactus</a></li>
          </ul>
        </div>
        
      </div>
    </nav>

    <div class="row text-center">
      <h1>Intro text</h1>    
      <a class="btn btn-primary btn-lg" href="#" role="button">Book a trip</a>
    </div>

  </div><!--container end -->
</div><!--jumbotron end -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

1. 或者您可以在像素中设置父块的宽度。并将width: 100%; 属性应用于图像。

   http://codepen.io/glebkema/pen/PzZNPo

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.navbar-brand {
  outline: 1px solid red;
  padding: 0 15px;
  width: 80px;
}
  
.navbar-brand img {
  outline: 1px solid blue;
  width: 100%;
}

<div class="jumbotron">
  <div class="container">

    <nav class="navbar navbar-default">
      <div class="container-fluid">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">	
            <img src="https://s-media-cache-ak0.pinimg.com/236x/f6/35/e7/f635e7cdfcf59c09236a44df28f53d92.jpg" alt="" />
          </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">home<span class="sr-only">(current)</span></a></li>
            <li><a href="#">our services</a></li>
            <li><a href="#">tour package</a></li>
            <li><a href="#">custom tour</a></li>
            <li><a href="#">travel partners</a></li>
            <li><a href="#">contactus</a></li>
          </ul>
        </div>
        
      </div>
    </nav>

    <div class="row text-center">
      <h1>Intro text</h1>    
      <a class="btn btn-primary btn-lg" href="#" role="button">Book a trip</a>
    </div>

  </div><!--container end -->
</div><!--jumbotron end -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 2

您可能需要考虑两件事，

1。 Bootstrap 为navbar-brand 设置了固定高度（50px）。

所以，它不允许任何子元素超过 50px。我们需要将其重置为

.navbar-brand{
 height:auto;
}

另外，您还需要设置padding:0 以使您的图像更大。

2。直接为<img> 应用宽度不是一个好主意。

在你的情况下，你已经给了width:30%。这使得它以移动分辨率在下一行流动。因此，您可以忽略宽度并尝试为图像指定高度。

试试这个，

.navbar-brand{
  border: 1px solid red;
  height:auto;
  padding:0;
}
  
  .navbar-brand img{
    width: auto;
    max-height:48px;
    vertical-align:center;
    border: 1px solid blue;
}

查看您的 codepen 的这个分叉和更新版本。 http://codepen.io/anon/pen/WxJRmL?editors=1100

谢谢！

Answer 3

我不确定是否可以使用纯 CSS 选项。您的 display: inline-block 正在创建一个包含 100% 所需空间的框，即使您已告诉子图像仅在其中渲染 70%。

你可以把 display: inline-block 去掉，然后用一个迷你桌子包裹你的锚元素（因为桌子有一种固有的“缩小以适应”的心态）但是桌子经常得到不好的代表，而且有点笨拙强制这个结果。

编辑：所需空间的 100%，我的意思是内联块内托管的子元素所需的空间。因此，即使您将孩子缩小到 70% 或 50%，内联块也已经为 100% 维度的元素“保留”了空间。