как принять размеры img в css

Question

Есть например вот такой код, как сделать так чтобы .images без размеров принял размеры myImage?

.images {
  width: 100%;
  position: relative;
  display: flex;
  overflow: hidden;
}

.myImage {
  position: absolute;
  height: auto;
  object-fit: cover;
  width: 100%;
}

<div class="images">
  <img src="anything.jpg" class="myImage" width="100%">
</div>

Answer 1

не совсем понятно что именно вам требуется

но очень похоже, что свойство object-fit

https://developer.mozilla.org/ru/docs/Web/CSS/object-fit

Answer 2

Задайте родителю высоту, если хотите чтобы картинка была на абсолюте внутри родителя с шириной в 100%:

.images {
  width: 100%;
  height: 300px;
  position: relative;
  display: flex;
  overflow: hidden;
}

.myImage {
  position: absolute;
  height: auto;
  object-fit: cover;
  width: 100%;
}

<div class="images">
  <img src="https://images.unsplash.com/photo-1609433635932-6571b56f4fd4?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" class="myImage" width="100%">
</div>

Либо такой вариант, чтобы родитель был размерами с картинку:

.images {
  width: 100%;
  display: inline-flex;
  overflow: hidden;
  border: 1px solid red;
}

.myImage {
  height: auto;
  object-fit: cover;
  width: 100%;
}

<div class="images">
  <img src="https://images.unsplash.com/photo-1609433635932-6571b56f4fd4?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" class="myImage" width="100%">
</div>

БЛОГ НА HUSL

как принять размеры img в css

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