관리-도구
편집 파일: galleryy.blade.php
@extends('layouts.apps') @section('content') <!-- breadcrumb-start --> <section class="breadcrumb-area wa-p-relative"> <div class="breadcrumb-bg-img wa-fix wa-img-cover"> <img class="wa-parallax-img" src="assets/gallery/bannerfront.jpg" alt=""> </div> <div class="container bs-container-1"> <div class="breadcrumb-wrap"> <h1 class="breadcrumb-title wa-split-right wa-capitalize" data-split-delay="1.1s">Gallery</h1> <div class="breadcrumb-list "> <a href="/">Home</a> <span>Gallery</span> </div> </div> </div> </section> <!-- breadcrumb-end --> <!-- team-start --> <section class="bs-team-3-area pt-140 pb-110 wa-fix"> <div class="container bs-container-1"> <!-- section-title --> <style> .bs-team-3-wrap { display: grid; grid-template-columns: repeat(3, 1fr); /* desktop */ gap: 15px; justify-content: center; } .bs-team-3-item { width: 100%; aspect-ratio: 3 / 4; /* automatically makes height responsive */ overflow: hidden; border: 1px solid #f16319; border-radius: 5px; } .bs-team-3-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========== Tablet (max-width: 992px) ========== */ @media (max-width: 992px) { .bs-team-3-wrap { grid-template-columns: repeat(2, 1fr); } } /* ========== Mobile (max-width: 600px) ========== */ @media (max-width: 600px) { .bs-team-3-wrap { grid-template-columns: repeat(1, 1fr); } } </style> <!-- team-member --> <div class="bs-team-3-wrap"> @foreach($galleryy as $gallery) <div class="bs-team-3-item"> <div class="item-img"><img src="{{ asset('storage/' . $gallery->image) }}" alt=""></div> </div> @endforeach </div> </div> </section> <!-- team-end --> @endsection