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

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”按钮下方流动，如图所示。

为了使徽标小而且与“nav-collapse”按钮位于同一行，我尝试使用宽度为百分比的媒体查询缩小图像尺寸，但是以红色边框显示的父级不会沉入缩小图像。

以下是真正问题的bootstrap代码的链接： 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

＆＃13;
＆＃13;
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; } }
＆＃13;
<a href="#">
  <img src="https://s-media-cache-ak0.pinimg.com/236x/f6/35/e7/f635e7cdfcf59c09236a44df28f53d92.jpg" alt="" />
</a>
＆＃13;
＆＃13;
＆＃13;

2）Bootstrap

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

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

＆＃13;
＆＃13;
@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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

＆＃13;
＆＃13;
@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%;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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选项是否可用。您的显示：内联块正在创建一个包含100％所需空间的框，即使您已告知子图像仅在70％的图像中呈现。

你可以使用display：inline-block，然后用一个迷你表包装你的锚元素（因为表有一个固有的缩小以适应心态）但是表通常会得到一个糟糕的代表和它＆ ＃39;有点重手只是为了强迫这个结果。

编辑：按所需空间的100％，我指的是在内联块中托管的子元素所需的空间。因此，即使您将孩子缩小到70％或50％，内联块也已经保留了＃39; 100％尺寸的元素空间。