0

Есть следующая рамка 4x3 для изображений:

.image {
  width: 100%;
}

.image .image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e7e7e7;
  padding: 2px;
  border-radius: 2px;
}

.image .image-wrapper.service {
  margin: 5px auto;
  height: 180px;
  width: 240px;
}

.image .image-wrapper img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
<div class="image">
  <div class="image-wrapper service">
    <img src="//via.placeholder.com/100x200" />
  </div>
</div>
<div class="image">
  <div class="image-wrapper service">
    <img src="//via.placeholder.com/100x100" />
  </div>
</div>
<div class="image">
  <div class="image-wrapper service">
    <img src="//via.placeholder.com/200x100" />
  </div>
</div>

Но тут такая ситуация что если изображение меньше, то он центруется, а если больше то подгоняется под пропорции.

Как мне сделать так чтобы маленькие изображения внутри рамки увеличились и подогнались под размер заданной 4x3 рамки не изменив пропорции?

2 ответа 2

2

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

.image .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

И не забывай задать контейнеру правильный размер.

2
  • Сейчас попробую
    – E1mir
    2 фев 2018 в 12:12
  • Мне нужен был не cover, а contain)) Решил проблему!))) спасибо) То что надо!
    – E1mir
    2 фев 2018 в 12:19
0

Повесил на :hover увеличение.

.image {
  width: 100%;
}

.image .image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e7e7e7;
  padding: 2px;
  border-radius: 2px;
}

.image .image-wrapper.service {
  margin: 5px auto;
  height: 180px;
  width: 240px;
}

.image .image-wrapper img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.image-wrapper {
  overflow: hidden;
}

.image-wrapper img {
  transition: .2s;
}

.image-wrapper:hover img {
  transform: scale(2);
}
<div class="image">
  <div class="image-wrapper service">
    <img src="//via.placeholder.com/100x200" />
  </div>
</div>
<div class="image">
  <div class="image-wrapper service">
    <img src="//via.placeholder.com/100x100" />
  </div>
</div>
<div class="image">
  <div class="image-wrapper service">
    <img src="//via.placeholder.com/200x100" />
  </div>
</div>

5
  • Я не хочу чтобы изображение обрезалось, надо просто подогнать под рамку, с большими изображениями всё ок, но с маленькими нет
    – E1mir
    2 фев 2018 в 12:12
  • Ну так отредактируйте вопрос. Я как понял так и ответил. 2 фев 2018 в 12:28
  • Да, согласен, чуток не правильно вопрос был задан, но тот кто ответил правильно понял чего я хотел, и уже на вопрос ответили, спасибо вам
    – E1mir
    2 фев 2018 в 12:34
  • Эгоизм. ))) Отредактируйте, для тех кто будет после вас искать ответ на такой же вопрос. 2 фев 2018 в 12:40
  • Дак уже сделал после вашего комментария)
    – E1mir
    2 фев 2018 в 12:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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