Можно ли правильно изменить размеры этих двух изображений на экране?

Question

Технологии:

• CSS
• Реакция
• JPG / PNG

Цель: хочу изменить размер двух изображений чтобы выглядеть так:

Я делаю «настройщик юбки» для моей мамы / портфолио, где покупатель может сменить «пояс» или «фабри c» с кнопками. Кнопки работают и, таким образом, настройки! Однако это выглядит так:

Этот вид не идеален ... Я попытался добавить классы (и идентификаторы) к изображению и контейнер теги и игра с CSS. Я попытался использовать максимальную высоту как «px» и / или 10% для пояса, 40% для fabri c. Я пытался возиться с высотой, шириной, максимальной шириной, надеясь на удачу с идеальной комбинацией. Я накачан, что javascript работает. Я надеюсь, что кто-то с навыками CSS сможет помочь мне с CSS. После того, как это сработает, я надеюсь надеть «юбку-прозрачную раму» поверх юбки и пояса, чтобы придать юбке больше вида юбки, но получение размеров действительно меня подбирает. Пожалуйста и спасибо!

Answer 1

Возможные варианты:

1. Поместите изображение в div с overflow: hidden и шириной / высотой в соответствии с вашими потребностями, установите изображение width на 100% и height на auto
2. Используйте div с фоном вместо img и добавьте background-size: cover к стилям div

Для первого метода это будет что-то вроде

//html
<div class="skirt">
  <div class="part belt"></div>
  <div class="part fabric"></div>
</div>

//css
.skirt {
  height: 500px;
}

.skirt .part {
  overflow: hidden;
}

.skirt .part img {
  width: 100%;
  height: auto;
}

.skirt .belt {
  height: 10%;
}

.skirt .fabric {
  height: 90%;
}

Что касается «вида юбки», вы можете попробовать добавить clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); к .skirt ( генератор пути клипа )