Я пытался использовать object-fit
на нескольких изображениях, размещенных внутри article
элементов, но это, похоже, не затрагивает их вообще.Объект-образ не влияет на изображения
Желаемое значение для свойства object-fit
будет cover
, но на данный момент ни одно из других значений не работает.
Когда я меняю его значение, они не сжимаются, не растут, не ... ничего.
Если вы видите CodePen, между двумя строками есть пробелы, и изображения не занимают одинаковое пространство/высоту (как и ожидалось с object-fit: cover
).
body{
\t margin: 0 auto; padding: 0;
}
main{
\t min-height: 70vh;
\t padding: 0;
}
main > section.posts{
\t box-sizing: border-box;
\t margin: 0; padding: 0;
\t display: flex;
\t flex-flow: row wrap;
}
main > section.posts > article{
outline: 1px solid red;
\t width: 22vw;
\t min-height: 100vh;
\t margin: 0; padding: 0;
\t flex-grow: 1;
\t overflow: hidden;
\t box-sizing: border-box;
}
main > section.posts > article > img{ /* Our suspect */
object-fit: cover;
}
<!--
Basic structure of this file is
<main>
<section.posts>
<article> (six of them)
<image>
-->
<main>
<section class="posts">
<article>
<img src="http://41.media.tumblr.com/tumblr_m6s6d65lE11qdnz8wo1_400.jpg">
</article>
<article>
<img src="http://41.media.tumblr.com/71c1fe7c899cd048fb961d3c1953411b/tumblr_nj24pvINyW1qzq8p3o1_400.jpg">
</article>
<article>
<img src="http://36.media.tumblr.com/3358cb6ac8eaa0e61dffd53bc1bab93d/tumblr_n92l475hol1qlmppmo1_400.png">
</article>
<article>
<img src="http://36.media.tumblr.com/9ad997ca0385a23a8d82ec919da2392c/tumblr_nwcewbFVAL1s71gzco1_400.jpg">
</article>
<article>
<img src="http://41.media.tumblr.com/tumblr_mbl45xDSwj1qfn79co1_400.jpg">
</article>
<article>
<img src="http://41.media.tumblr.com/1c3718e71a2aa5acaaaf4af654991c91/tumblr_nx6psaH67d1tvh80lo1_400.jpg">
</article>
</section>
</main>
привет, вы можете сказать мне, что ваш вопрос/проблема? –
Привет, во-первых, спасибо за ваше время :) Моя проблема в том, что объект-подгонка, кажется, вообще ничего не делает на изображениях. Когда я меняю его значение, они не сжимаются, не растут, не ... ничего .... Если вы видите CodePen, между двумя строками есть пробелы, а изображения не взять все одинаковое пространство/высоту (как и следовало ожидать с помощью 'object-fit: cover'). – P3t3r6
Я никогда не пользовался объектами, и я не думаю, что это работает на моем текущем браузере Chrome Chrome, но из того, что я прочитал, похоже, это относится к самому изображению, а не к контейнеру изображения. Поэтому, если вы укажете ширину и высоту изображения, вы можете получить то, что хотите. Так что в вашем случае, возможно, создание гибкой работы с изображением вместо статьи – teynon