Поменять соотношение сторон и сохранять его в img-fluid

Question

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

Это работает так.

<input type="image" src="@Url.Content(topRated.Value)" onclick="this.form.submit" class="resize" width="175" height="250">

img.resize {
    width: 175px;
    height: 250px;
}

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

<input type="image" alt="Submit Form" src="@Url.Content(topReaded.Value)" onclick="this.form.submit" class="img-fluid" width="175" height="250">

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

Вопрос - как сделать чтобы оно работало вместе? Нужно чтобы изображения сначала растягивались до соотношения сторон, соответствующих 175х250, а потом аккуратно подстраивались под родительский элемент, как это делает img-fluid

Answer 1

Добавьте элементу оба класса. Затем в одном из них укажите display: none; и в медиазапросе с определённой ширины экрана поменяйте этик лассам свойства display.

img.resize {
    width: 175px;
    height: 250px;
}

img.img-fluid {
  display: none;
  max-width: 100%;
  height: auto;
}

@media (max-width: 1000px) {
  img.resize {
    display:block;
  }
  img.img-fluid {
    display:none;
  }
}

@media (min-width: 1001px) {
  img.resize {
    display:none;
  }
  img.img-fluid {
    display:block;
  }
}

<input type="image" src="@Url.Content(topRated.Value)" onclick="this.form.submit" class="resize img-fluid">

Само собой, 1000px в медиазапросах указано для примера.

БЛОГ НА HUSL

Поменять соотношение сторон и сохранять его в img-fluid

Ответы (1 шт):