Я создал простой макет изображений с преобразованием. Я добавил скрытый переполнением класс в родительский div, но переполнение масштабированного изображения все еще появляется перед изображением выше. Как предотвратить появление изображения переполнения перед изображением выше?
<div class="flex" style="height: 50vh"> <a href="#" class="flex-1 bg-gray-400 relative overflow-hidden"> <img class="object-cover origin-center h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1519638399535-1b036603ac77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt=""> </a> <a href="#" class="flex-1 bg-gray-400 overflow-hidden"> <img class="object-cover h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> <div class="flex-1 bg-gray-400 relative overflow-hidden"> <a href="#" class="w-1/4 bg-gray-400 overflow-hidden relative"> <img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> <a href="#" class="w-1/4 bg-gray-400 overflow-hidden"> <img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 origin-center transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> </div> <div class="flex-1 bg-gray-400 overflow-hidden"> <a href="#" class="w-1/4 bg-gray-400 overflow-hidden"> <img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> <a href="#" class="w-1/4 bg-gray-400 overflow-hidden"> <img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> </div> </div>
Пара проблем здесь.
«overflow: hidden» не будет работать на встроенных элементах, но тег «a» встроен.
Вы используете ширину и высоту для этих встроенных элементов (и не должны).
Вам не нужно использовать относительное с переполнением если ребенок не будет расположен абсолютно.
Вместо style = "height: 50%" было бы лучше также использовать попутный ветер (h-1/2).
Но вам не нужна высота 50% для элемента, просто установите flex и flex-col на родительском элементе.
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/> <div class="flex" style="height: 50vh"> <a href="#" class="flex-1 block bg-gray-400 overflow-hidden"> <img class="object-cover origin-center h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1519638399535-1b036603ac77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt=""> </a> <a href="#" class="flex-1 block bg-gray-400 overflow-hidden"> <img class="object-cover h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> <div class="flex-1 flex flex-col bg-gray-400 overflow-hidden"> <a href="#" class="block bg-gray-400 overflow-hidden"> <img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> <a href="#" class="block bg-gray-400 overflow-hidden"> <img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> </div> <div class="flex-1 flex flex-col bg-gray-400 relative overflow-hidden"> <a href="#" class="block bg-gray-400 overflow-hidden"> <img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> <a href="#" class="block bg-gray-400 overflow-hidden"> <img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> </div> </div>
Также этот шаблон выглядит как прекрасный пример утилиты grid css. Таким образом, вы можете использовать такие сетки вместо флексбоксов:
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/> <div class="grid grid-cols-4 grid-rows-2" style="height: 50vh"> <a href="#" class="col-span-1 row-span-2 block bg-gray-400 overflow-hidden"> <img class="object-cover origin-center h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1519638399535-1b036603ac77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt=""> </a> <a href="#" class="col-span-1 row-span-2 block bg-gray-400 overflow-hidden"> <img class="object-cover h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> <a href="#" class="col-span-1 block bg-gray-400 overflow-hidden"> <img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> <a href="#" class="col-span-1 block bg-gray-400 overflow-hidden"> <img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> <a href="#" class="col-span-1 block bg-gray-400 overflow-hidden"> <img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> <a href="#" class="col-span-1 block bg-gray-400 overflow-hidden"> <img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </a> </div>