Question

我试图为我的html文件制作横幅（链接覆盖它），但是我无法让img将自己调整为div边框。它继续走出边界并溢出：隐藏;只是切断它。以下是我的代码： -

＆＃13;

    <style>
        img
        {
            max-height: 100%;
            max-width: 100%;     
        }
        .topdiv
        {
            height: 250px;
            border: 4px solid black;
            width: 100%;
            overflow: hidden; 
        }
    
        
        .banner
        {
            float: left;
        }
        .banlink
        {
            float: right;
            float: bottom;
            border: 4px solid black;
        }
        
        .topdiv .banlink nav a 
        {
            text-decoration: none;
            color: #295c87;
        }
    </style>

＆＃13;

<div class="topdiv">
            
            <div class="banner">
                
                <img src="thedry.png" title="[]_[]" alt="deck" style="width: 100%;"/> 
        
            </div>
            
            <div class="banlink">
            
                <nav>
                    <!-- style="text-decoration: none;" --> 
                    <a href="index.html">Home</a>
                    
                    <a href="page2.html">Pictures</a>
                    
                    <a href="page3.html">Meet the Family</a>
                 </nav>
            
            
            </div>
            
        </div>

＆＃13;

Answer 1

您可以将图片横幅宽度和高度设置为横幅div的宽度和高度的100％（或您喜欢的百分比），这样它就不会溢出。
注意设置正确的百分比以保持图像的比例此外，您可以将图像设置为横幅div的背景图像，但在这种情况下，您的图像也可能会拉伸。

Answer 2

我认为这是你要做的 -

.banner {
  background-image: url(http://i.ytimg.com/vi/v1SabYdIlZI/maxresdefault.jpg);
  background-size: 100% 100%;
  height: auto;
  padding: 100px 100px;
}

.topdiv {
  border: 4px solid black;
  width: 100%;
  overflow: auto;
}

.banlink {
  float: right;
  float: bottom;
  border: 4px solid black;
}

.topdiv .banlink nav a {
  text-decoration: none;
  color: #295c87;
}

<body>
  <div class="topdiv">
    <div class="banner">
      <div class="banlink">
        <nav>
          <a href="index.html">Home</a>
          <a href="page2.html">Pictures</a>
          <a href="page3.html">Meet the Family</a>
        </nav>
      </div>
    </div>
  </div>
</body>

如何在div边框内调整img的大小？

2 个答案: