Изменение размера, изображение любого размера в Div

Question

Я пытаюсь сделать изображение, чтобы поместиться в div независимо от размера изображения, но при загрузке изображения разного размера изображение не подходит или сопоставимо с другими на большем размере.

JS JSFiddle DEMO

.

HTML:

<div class="wrapper"> 
<div id="one"> 
<a href="http://ironware.in/product-category/faucets/" style=" text-decoration: none;"><img class="imagewidth" src="http://mangoesandmiles.com/wp-content/uploads/2015/07/grohe-bathroom-faucets-SGjy.jpg"/> 
<br> 
<h3 class="imagewidth" id="h11" style="padding: 9px; text-align:center;">Bathroom Facets</h3> 
</a> 
</div> 
<div id="one"> 
<a href="http://ironware.in/product-category/faucets/" style=" text-decoration: none;"><img class="imagewidth" src="http://www.vinodpatel.com.fj/media/catalog/category/paint_swatches.jpg"/> 
<br> 
<h3 class="imagewidth" id="h11" style="padding: 9px; text-align:center;">Bathroom </h3> 
</a> 
</div> 
<div id="one"> 
<a href="http://ironware.in/product-category/faucets/" style=" text-decoration: none;"><img class="imagewidth" src="http://mangoesandmiles.com/wp-content/uploads/2015/07/grohe-bathroom-faucets-SGjy.jpg"/> 
<br> 
<h3 class="imagewidth" id="h11" style="padding: 9px; text-align:center;"> Facets</h3> 
</a> 
</div> 
</div> 

CSS:

.wrapper div { 

      width: 100%; 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      padding-bottom: 8%; 
      } 

      @media screen and (min-width: 600px) { 
      .wrapper { 
      height: auto; 
      } 
      #one { 
      width: 33.3333%; 
      float: left; 

      } 

      } 



      #one:hover h3 { 



      transition: border-color .5s ease-in-out; 
      cursor: pointer; 

      color:#ff0000; 
      border-bottom-color: #ff0000; 

      } 





      #one h3 { 

      color:#000000; 
      border-bottom: 2px solid #e7e4da; 
      } 




      .imagewidth 
      { 
      width: 98.5%; 
      max-width: 100% 
      } 

      .headding_line 
      { 
      width: 50px; 
      margin-top: 0px; 
      margin-bottom: 30px; 
      border-top: 2px solid #e7e4da; 
      } 

Answer 1

Есть много проблем, HTML/CSS, как повторяющиеся идентификаторы. У вас будут другие проблемы с ними в будущем, просто чтобы вы знали. Но поскольку они не являются причиной вашего вопроса, я не буду вдаваться в них.

Поскольку вы использовали width: 33% для своих элементов, вы можете дать изображения height: 33vw, что в значительной степени означает, что высота равна 33% от ширины вашего видового экрана. Примечание: это будет растягиваться наше изображение example

Если вы хотите, чтобы изображение, которое будет проложенный вместо этого, вам нужно добавить еще один контейнер DIV: example

Answer 2

Привет @Pauli первую очередь это моя попытка добиться того, что вы хотите

одну вещь высоты образы отрегулирует получая по ширине он сам.

Если вам нужна конкретная высота, то вам необходимо указать применение.

смотрите, пожалуйста, если это работает для вас или нет

.wrapperdiv{ 
 
\t width: 100%; 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
\t padding-bottom: 8%; 
 
} 
 
.one{ 
 
    max-width:40%;  
 
} 
 
.one img{ 
 
    max-width:40%; 
 
    max-height:auto; 
 
    display:block; 
 
} 
 
.one h3{ 
 
    max-width : 40%; 
 
} 
 
@mediascreenand (min-width: 600px){ 
 
\t .wrapper{ 
 
\t \t height: auto; 
 
\t }.one{ 
 
\t \t width: 33.3333%; 
 
\t \t float: left; 
 
\t } 
 
} 
 
.one:hover h3{ 
 
\t transition: border-color .5s ease-in-out; 
 
\t cursor: pointer; 
 
\t color: #ff0000; 
 
\t border-bottom-color: #ff0000; 
 
} 
 
.one{ 
 
    max-width:70%;  
 
} 
 
.one img{ 
 
    max-width:70%; 
 
    max-height:auto; 
 
    display:block; 
 
} 
 
.one h3{ 
 
    max-width:70%; 
 
\t color: #000000; 
 
\t border-bottom: 2px solid #e7e4da; 
 
} 
 
.headding_line{ 
 
\t width: 50px; 
 
\t margin-top: 0px; 
 
\t margin-bottom: 30px; 
 
\t border-top: 2px solid #e7e4da; 
 
}

<div class="wrapper"> 
    <div class="one"> 
     <a href="http://ironware.in/product-category/faucets/" style=" text-decoration: none;"> 
      <img class="imagewidth" src="http://3.s3.envato.com/files/17065809/1_skywalker-template-preview.__large_preview.png"/><br> 
      <h3 class="imagewidth" id="h11" style="padding: 9px; text-align:center;">Bathroom Facets</h3> 
     </a> 
    </div> 
    <div class="one"> 
     <a href="http://ironware.in/product-category/faucets/" style=" text-decoration: none;"> 
      <img class="imagewidth" src="http://www.ahrefmagazine.com/wp-content/uploads/2013/03/thrill.jpg"/><br> 
      <h3 class="imagewidth" id="h11" style="padding: 9px; text-align:center;">Bathroom </h3> 
     </a> 
    </div> 
    <div class="one"> 
     <a href="http://ironware.in/product-category/faucets/" style=" text-decoration: none;"> 
      <img class="imagewidth" src="http://www.ahrefmagazine.com/wp-content/uploads/2013/03/jscover_thumb.jpg"/><br> 
      <h3 class="imagewidth" id="h11" style="padding: 9px; text-align:center;"> Facets</h3> 
     </a> 
    </div> 
</div> 

и одна вещь, которую я действительно хочу предложить, когда вы задаете вопрос, пожалуйста, обращайтесь соответствующий код структура в js скрипке или где когда-либо вы даете код, вызывают одно: люди будут отвечать только тогда, когда им придется приложить минимальные усилия, чтобы понять и найти проблему.

должна нужна обратная связь ли работа или нет