div 테두리 안에 img의 크기를 조정하는 방법은 무엇입니까?

링크를 오버레이하는 HTML 파일에 대한 배너를 만들려고하지만 img를 div 테두리로 크기를 조정할 수 없습니다. 그것은 국경의 바깥으로 계속 가고 넘쳐 흐른다 : 숨겨진; 그냥 잘라 버린다. 은 여기 아래에 내 코드 : - 당신은 이미지 배너 폭과 높이 100 % (또는 당신이 선호하는 비율) 배너 DIV의 폭과 높이를 설정할 수 있습니다div 테두리 안에 img의 크기를 조정하는 방법은 무엇입니까?

<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>

<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>

출처

2017-10-22 ConfusedCodeCat

내가이 CSS는 문제 https://jsfiddle.net/zer00ne/hu8bf3m3/ – zer00ne

가 표시되지 않습니다 무효 :'float : bottom;' –

, 이 방법으로 오버 플로우되지 않습니다.
이미지의 비율을 유지하기 위해 올바른 비율을 설정하는 데주의하십시오.
또한 배너 div의 배경 이미지으로 이미지를 설정할 수 있지만이 경우에도 이미지가 늘어날 수 있습니다.

출처

2017-10-22 17:25:32 HJuls2

나는 당신이 뭘 하려는지이 생각 -

.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>

출처

2017-10-22 18:05:23

div 테두리 안에 img의 크기를 조정하는 방법은 무엇입니까?

답변

관련 문제