HTML CSS 및 JavaScript를 사용하는 Shutterstock, Pixabay 및 Adobe Stock과 같은 반응형 이미지 갤러리
이 게시물에서는 Adobe Stock 및 pixabay와 같은 이미지 갤러리를 매우 쉬운 단계로 만드는 방법을 보여줍니다.
Live Demo
Git Repository
어떻게 생겼는지 보자
우리는 이 레이아웃을 두 가지 쉬운 단계로 만들 것입니다.
자바스크립트 적용
기본 html 및 css 레이아웃 만들기
HTML로 시작하십시오. 이 코드 블록에서 나는 이 기본 div 안에 제목과 기본 div를 만듭니다. 이미지와 제목을 포함하는 img div를 만들었습니다.
<body>
<h1>My Favourite Anime List</h1>
<div id="main">
<div class="img"><img src="images/yourname.jpg" alt="yourname">
<p>yourname</p>
</div>
<div class="img"><img src="images/dragon_ball_z.jpg" alt="dragon ball z">
<p>dragon ball z</p>
</div>
<div class="img"><img src="images/your_lie_in_april.jpg" alt="your lie in april">
<p>your lie in april</p>
</div>
<div class="img"><img src="images/grave_of_the_firefiles.jpg" alt="grave of the firefiles">
<p>grave of the firefiles</p>
</div>
<div class="img"><img src="images/naruto.jpg" alt="naruto">
<p>naruto</p>
</div>
<div class="img"><img src="images/demon_slayer.jpg" alt="demon slayer">
<p>demon slayer</p>
</div>
<div class="img"><img src="images/spirited_away.jpg" alt="spirited away">
<p>spirited away</p>
</div>
<div class="img"><img src="images/weathering-with-you-anime.jpg" alt="weathering with you anime">
<p>weathering with you anime</p>
</div>
<div class="img"><img src="images/i_want_to_eat_your_pancreas.jpg" alt="i want to eat your pancreas">
<p>i want to eat your pancreas</p>
</div>
<div class="img"><img src="images/spyxfamily.jpg" alt="spyxfamily">
<p>spyxfamily</p>
</div>
<div class="img"><img src="images/death_note.jpg" alt="death note">
<p>death note</p>
</div>
</div>
</body>
이제 css를 사용하여 모양을 개선하고 반응형으로 만드세요.
이 CSS에서는 flexbox를 사용하여 모든 이미지를 인라인으로 만듭니다.
레이아웃 이미지 높이가 고정되어 있으므로 너비는 이미지 방향으로 자동입니다.
호버에서 간단한 페이드 효과를 사용하여 제목과 이미지를 표시합니다.
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0px;
padding: 0px;
}
body {
font-family: 'League Spartan', sans-serif;
}
/* css for main div */
#main {
display: flex;
flex-wrap: wrap;
padding: 10px 0px;
margin: auto;
}
/* css for title */
h1 {
font-size: calc(18px + 3vw);
background: url('images/text-bg.png');
background-position: center;
-webkit-background-clip: text;
color: transparent;
font-weight: 700;
margin: 2% 1% -10px 1%;
}
/* css for img div */
.img {
height: 250px;
margin: 1%;
overflow: hidden;
box-shadow: 2px 5px 10px -.5px #afafaf;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all .2s;
}
/* css for img title */
.img p {
position: absolute;
top: 0%;
left: 0%;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(10px + 1.2vw);
text-align: center;
font-weight: 200;
text-transform: uppercase;
color: white;
width: 100%;
height: 250px;
background: linear-gradient(#ffffff9e, #000000cf);
margin: 0px;
opacity: 0;
transition: all .3s;
}
.img:hover p {
opacity: 1;
}
/* css for image */
.img img {
height: 250px;
width: 100%;
object-fit: cover;
object-position: center;
}
/* writing media query for make it responsive */
@media(max-width: 1000px) {
.img {
height: 150px;
}
.img img {
height: 150px;
}
.img p {
height: 150px;
}
}
@media(max-width: 650px) {
.img {
height: 130px;
}
.img p {
height: 130px;
}
.img img {
height: 130px;
}
#main {
justify-content: center;
}
}
@media(max-width: 350px) {
.img {
height: 100px;
}
.img p {
height: 100px;
}
.img img {
height: 100px;
}
}
이제 갤러리가 어떻게 생겼는지 확인하십시오.
이 레이아웃에서는 오른쪽에 많은 공백이 있고 보기에 좋지 않습니다. 고쳐야 합니다.
이 공간을 제거하기 위해 flex grow 및 shrink 속성을 사용합니다. 하지만 이미지 비율을 기준으로 이 속성을 적용합니다.
이미지 비율을 계산하고 모든 이미지에 적용하기 위해 javascript를 사용합니다.
그럼 다음 단계로 넘어갑시다 ⏯
자바스크립트 적용
function setratio() {
var main = document.getElementById("main"); //select the main div
var images = main.querySelectorAll('.img'); //select div has class img
// and now run the loop to to select all images
for (var i = 0; i < images.length; i++) {
var mainImg = images[i].querySelectorAll('img')[0]; // select the image inside .img div
var imgratio = mainImg.naturalWidth / mainImg.naturalHeight; // now we find the ratio of our images
var maxWidth = mainImg.offsetHeight * imgratio + (mainImg.offsetHeight * imgratio) / 2; // now we set max-width
function myFunction(x) {
if (x.matches) { // If media query matches
images[i].setAttribute('style', `flex-grow:${imgratio};flex-shrink: ${imgratio};`); // set a style attribute of our img div
} else {
images[i].setAttribute('style', `flex-grow:${imgratio};flex-shrink: ${imgratio};max-width:${maxWidth}px`); // set a style attribute of our img div
}
}
var x = window.matchMedia("(max-width: 550px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
}
}
나는 setratio()라는 함수를 만들었고 이제 이 함수 onload body를 적용합니다.
<body onload="setratio()">
내 자바 스크립트 코드에서 먼저 모든 이미지를 얻기 위해 for 루프를 실행하는 것보다 메인 및 이미지 div를 변수에 저장합니다. 이미지의 비율을 찾기 위해
naturalWidth 및 naturalHeight javascrpt 속성을 사용하여 비율을 찾고 imgratio라는 변수에 저장하는 것보다 이제 이 비율을 이미지 플렉스 성장 및 축소 속성으로 사용합니다. 이제 추가 공간이 제거됩니다. 첫 번째 문제가 해결되었습니다.그러나 이제 모든 이미지에 대해 최대 너비를 설정해야 이미지가 용량에 따라 커집니다. 최대 너비를 찾기 위해
offsetheight javascript 속성을 사용합니다. 이제 mainImg.offsetHeight에 imgratio를 곱하고 4로 나누었습니다. 최대 너비 값을 얻었고 이제 더 나은 보기를 위해 이 최대 너비 속성을 550px 너비 이상의 장치에만 적용합니다.이제 우리의 최종 제품이 준비되었습니다. 모든 장치에 반응하고 멋져 보입니다.
모든 장치에서 어떻게 보이는지 봅시다
👍 제 글을 읽어주셔서 감사합니다
Reference
이 문제에 관하여(HTML CSS 및 JavaScript를 사용하는 Shutterstock, Pixabay 및 Adobe Stock과 같은 반응형 이미지 갤러리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/krishnasoni007/responsive-image-gallery-like-shutterstock-pixabay-and-adobe-stock-using-html-css-javascript-2dk0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
