Как вставить большое изображение в блок меньшего размера?

238

23 марта 2017, 18:39

Есть блок .column который имеет определенный размер (220px в ширину).
В блок вставляется картинка большего размера(850px в ширину). И на данном этапе эта картинка заполняет это блок(т.е. становится 220px).

Как сделать, чтобы она вставлялась со своим размером (850px)?

.content { display: inline-block; } 
.column {float:right; width:225px;} 
 
.single-slide { 
  width: auto; 
  max-width: inherit; 
} 
 
.single-slide img { 
  width: auto; 
  max-width: inherit !important; 
  max-height: inherit !important; 
}

<div class="content">   
    <div class="column"> 
      <div class="slider"> 
        <div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div> 
      </div> 
    </div> 
  </div>

Answer 1

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

.block { 
  border: 1px solid; 
  width: 220px; 
  padding: 5px; 
} 
 
img { 
  display: block; 
}

<div class=block> 
  <img src="http://placeimg.com/800/600/any" /> 
</div>

Answer 2

Возможно где-то еще заданы стили для responsive img, поэтому можно добавить img { width: auto; }:

.column { 
  width: 220px; 
} 
 
img { 
  width: auto; 
  max-width: inherit; 
}

<div class="column"> 
  <div class="slider"> 
    <div><img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png"></div> 
  </div> 
</div>

P.S: Возможно, что у .column задан overflow: hidden; и изображение просто обрезается из-за этого, но это как предположение.

Update:

Вообщем проблема в .column { width: 220px; } Для чего Вы задаете такие размеры, если хотите, чтобы внутри находился слайдер с картинками в 850px?! Не совсем понятно.

$(".slider").slick({ 
  slidesToShow: 1, 
  arrows: false 
});

.column { 
  width: 220px; 
} 
 
 
.column img { 
  width: auto; 
  max-width: inherit; 
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> 
   
<div class="column"> 
    <div class="slider"> 
    <div> 
      <img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt=""> 
    </div> 
    <div> 
       <img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt=""> 
    </div> 
    <div> 
       <img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt=""> 
    </div> 
  </div> 
</div>

Если нужна фиксированная ширина картинок в слайдере и именно в 850px, то стоит задать такую ширину и самому слайдеру:

$(".slider").slick({ 
  slidesToShow: 1, 
  arrows: false 
});

.column { 
  width: 220px; 
} 
 
.slider { 
  width: 850px; 
} 
 
.column img { 
  width: auto; 
  max-width: inherit; 
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> 
   
<div class="column"> 
    <div class="slider"> 
    <div> 
      <img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt=""> 
    </div> 
    <div> 
       <img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt=""> 
    </div> 
    <div> 
       <img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt=""> 
    </div> 
  </div> 
</div>

А вот если хотите, что бы ширина все-таки была 220px и слайдер вмещался в эту ширину, то все-таки лучше адаптировать и картинки под эту ширину:

$(".slider").slick({ 
  slidesToShow: 1, 
  arrows: false 
});

.column { 
  width: 220px; 
} 
 
.column img { 
  width: 100%; 
  max-width: 100%; 
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> 
   
<div class="column"> 
    <div class="slider"> 
    <div> 
      <img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt=""> 
    </div> 
    <div> 
       <img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt=""> 
    </div> 
    <div> 
       <img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt=""> 
    </div> 
  </div> 
</div>

P.S: есть еще вариант - убрать ширину .column {width: 220px; } и отображать слайдер с изображениями тех размеров какие есть (variableWidth: true):

$(".slider").slick({ 
  slidesToShow: 1, 
  arrows: false, 
  variableWidth: true 
});

.column img { 
  width: auto; 
  max-width: inherit; 
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> 
   
<div class="column"> 
    <div class="slider"> 
    <div> 
      <img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt=""> 
    </div> 
    <div> 
       <img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt=""> 
    </div> 
    <div> 
       <img src="https://s-media-cache-ak0.pinimg.com/originals/58/46/3a/58463a4dd0aa2cd68ba00a81868712eb.png" alt=""> 
    </div> 
  </div> 
</div>