Раскладка флюида CSS и динамическое масштабирование изображения

Question

У меня вопрос о динамическом масштабировании изображений в контейнере div. Я создаю портфолио с тремя изображениями проектных изображений, масштабируемыми по ширине, но статическими по высоте (например, div container => Ширина 33.33334%: Высота 250 пикселей).

Я озадачен различными идеями CSS, но макет всегда ломается, так как изображения различаются по размеру, а также к контейнеру. Я не специалист в области CSS и JS, и теперь я как бы застрял в поисках совета, в первую очередь, где искать решение, возможно, некоторые идеи/фрагменты кода или даже лучшие примеры/API и т. Д.

I Я сделал небольшой пример того, где я сейчас, так как вы видите, что одно из изображений меньше из-за его размеров, а макет разбит.

jsfiddle пример: jsFiddle example

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

наилучшими пожеланиями Мадс

Answer 1

я мог спутать, как к тому, что вы просите, но если вы просто хотите, чтобы размеры infoBlocks быть последовательными, вы можете использовать width: 33.33% вместо max-width: 33.33% и изображения width: 100%; height: 100%;

Адрес updated jsFiddle; это то, что вы хотели?

Answer 2

Попробуйте этот метод для легкой сетки. Он масштабирует изображение, чтобы соответствовать .image-box, но сохраняет соотношение сторон. Любая часть изображения, превышающая это значение .image-box, удаляется переполнением.

HTML:

<div class="image-box"> 
    <div class="source"> 
     <img alt="Img_0106" src="http://www.team-bhp.com/forum/attachments/shifting-gears/1033178d1356977973-official-non-auto-image-thread-_mg_0143.jpg"> 
    </div> 
</div> 
<div class="image-box"> 
    <div class="source"> 
     <img alt="Img_0106" src="http://upload.wikimedia.org/wikipedia/commons/a/af/All_Gizah_Pyramids.jpg"> 
    </div> 
</div> 

CSS

.image-box { 
background: #000; 
height: 170px; 
width: 256px; 
    float: left; 
} 
.image-box .source { 
overflow: hidden; 
width: auto; 
height: 100%; 
} 
.image-box .source img { 
width: 100%; 
} 

http://jsfiddle.net/A2cc6/

Answer 3

Попробуйте установить только высоту или ширину не так, то это будет уважать соотношение изображения. Вы также можете играть с минимальной/максимальной шириной/высотой.

Может быть, что вы пытаетесь достичь, это

.myimg { высота: 250px; ширина: 100%; }

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

Answer 4

я, возможно, нашли решение JQuery этой проблемы check this jsFiddel

or check my online exampel here

Что им делать здесь есть, когда страница загрузится я проверить все изображения против него.чтобы определить, какой стиль CSS ему нужен. и теперь voila изображения масштабируют текучую среду до контейнера, следующим шагом будет центрировать изображение в контейнере div.

Если у вас есть возможность проверить, правильно ли написан код для кросс-браузеров, это было бы очень здорово, а другие могли бы использовать его тоже :). благодарит за вашу помощь.

счастливый: D Мадса

JQuery код:

$(window).load(function() { 
      plottingData(); 
      resizeImage(); 
     }); 

     $(window).resize(function() { 
      plottingData(); 
      resizeImage(); 
     }); 

     function plottingData(){ 
      var image = $('.box img'); 
      var divW = $(".box").width(); 
      var divH = $(".box").height(); 
      var imgW = image.width(); 
      var imgH = image.height(); 
      $('.outputText').html('DIV CONTAINER W: '+divW+ ' H: ' +divH +' :: imgW: '+imgW +' : imgH: ' +imgH) ; 
     } 


     function resizeImage(){ 
      $("img").each(function(){ 
      var maxWidth = $(".box").width();; // Max width for the image 
      var maxHeight = $(".box").height();; // Max height for the image 
      var maxratio=maxHeight/maxWidth; 
      var width = $(this).width(); // Current image width 
      var height = $(this).height(); // Current image height 
      var curentratio=height/width; 
      // Check if the current width is larger than the max 

      if(curentratio>maxratio) 
      { 
       ratio = maxWidth/width; // get ratio for scaling image 
       /* 
       $(this).css("width", maxWidth); // Set new width 
       $(this).css("height", height *ratio); // Scale height based on ratio 
       */ 
       $(this).css("width", "100%"); 
       $(this).css("height", "auto"); 
      } 
      else 
      { 
       /* 
       ratio = maxHeight/height; // get ratio for scaling image 
       $(this).css("height", maxHeight); // Set new height 
       $(this).css("width", width * ratio); // Scale width based on ratio 
       */ 
       $(this).css("width", "auto"); 
       $(this).css("height", "100%"); 
      } 

     }); 
     }