0

Есть картинки, которые хочу разместить В ОДНУ СТРОКУ НА ВСЮ ШИРИНУ ЭКРАНА так, чтобы высота картинок была одинакова ОТНОСИТЕЛЬНО ДРУГ ДРУГА на любых разрешениях, при этом каждая из них сохраняла свои пропорции: не сужались, не растягивались и примыкали друг к другу вплотную. И хотелось бы добиться кроссбраузерности - реально? ссылка на фидл

* {
	margin:0;
	padding:0;
}
img {
  max-width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<section class="row">
  <div class="col-sm-3 col-xs-3">
    <img src="http://placehold.it/598x396">
  </div>
  <div class="col-sm-3 col-xs-3">
    <img src="http://placehold.it/488x396">
  </div>
  <div class="col-sm-3 col-xs-3">
    <img src="http://placehold.it/605x396">
  </div>
  <div class="col-sm-3 col-xs-3">
    <img src="http://placehold.it/756x396">
  </div>
</section>

8
  • можно добавить max-height:нужная_высота вместо max-width
    – Umer
    Commented 12 янв. 2016 в 15:49
  • @Umer а как же тогда быть с шириной? все картинки полностью не влезут... jsfiddle.net/wzpy2d1p/5
    – Вася
    Commented 12 янв. 2016 в 20:19
  • 1
    Просто уберите бутстраповские классы и сделайте дивам обычный float:left
    – Grundy
    Commented 13 янв. 2016 в 6:51
  • 1
    а зачем вы оставили max-width, если вам раньше посоветовали уже max-height? :-) например в принципе можно и обычным height обойтись
    – Grundy
    Commented 13 янв. 2016 в 7:20
  • 1
    Давайте продолжим обсуждение в чате.
    – Grundy
    Commented 13 янв. 2016 в 7:26

2 ответа 2

1

Итак, самое изящное решение №1 (Спасибо @Grundy) - склеить все картинки в одну:

* {
  margin: 0;
  padding: 0;
}
section: {
  overflow: hidden;
}
img {
  width: 100%;
}
<section>
  <div>
    <img src="http://placehold.it/2447x396">
  </div>
</section>
ответ 1

решение №2 без объединения без ie 8: ответ 2 для ie 8 возможно подставить (на placehold.it проверить не удалось)

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='img.jpg',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='img.jpg',
sizingMethod='scale')";

решение №3 со скриптом: ответ 3.1 или ответ 3.2

0
.pad-img {
    padding: 2px;
    float: left;        
    height: 50px;  
    // vertical-align: top;
}
12
  • нужно задействовать всю ширину экрана и так, чтобы картинки не соскакивали на 2ую строчку. задачка не такая простая, как кажется на первый взгляд
    – Вася
    Commented 13 янв. 2016 в 7:25
  • 1
    в % задайте ширину блока с изображением, чтобы задействовать всю ширину контейнера
    – soledar10
    Commented 13 янв. 2016 в 7:28
  • @soledar10 поясните - для каждого изображения?
    – Вася
    Commented 13 янв. 2016 в 7:30
  • 1
    @soledar10, тогда у них может быть разная высота, в зависимости от начальных пропорций
    – Grundy
    Commented 13 янв. 2016 в 7:34
  • 2
    @Вася display flex используете? jsfiddle.net/soledar10/q44xu0a9
    – soledar10
    Commented 13 янв. 2016 в 7:41

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.