반응 형 이미지 갤러리 만들기

debugcn 에 게시 Dev

꿀

모바일에서 Instagram과 같은 반응 형 이미지 갤러리를 만들려고합니다. 좌우 여백없이 가로 3 장의 이미지를 갖고 싶습니다. 이것을 어떻게 할 수 있습니까?

지금까지 내가 가지고있는 것은 다음과 같습니다.

@media (max-width: 480px) {
    .portfolio-list li {
        width:33.3333%;
        height: 100px;
        border: 3px solid white;
        margin: -3px;
    }

    .portfolio-container,
    .portfolio-list {
        margin-right: 0 ;
        margin-left:0;
        margin-top:10px;
    }

    .portfolio-list {
        width: 100%;
    }
}

portfolio-list {
    list-style: none;
}

.portfolio-list li {
    position: relative;
    display: block;
    float: left;
}

.portfolio-list li img {
    display: block;
    width: 100%;
    margin:0;
    vertical-align: top;
    height: 100%;
}

<container class="portfolio-container text-center">
    <ul class="portfolio-list" style="margin:0 auto">
        <li style="margin:0 auto">
            <a href="#"><img src="{{$img['image']}}"></a>
        </li>
    </ul>
</container>

내가 가지고있는 갤러리의 이미지는 다음과 같습니다.

남쪽

편집 : 데스크톱보기도 추가되었습니다.

항상 미디어 쿼리를 끝에 넣으십시오. 그렇지 않으면 다음 선택기에 의해 재정의됩니다.
미디어가 아닌 쿼리 .portofolio-list를 flexbox로 전환했습니다.
portfolio-list어디에 점이 없습니다 list-style: none.

기본적으로 다음을 추가했습니다.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

브라우저 여백을 재설정하고 상자가 축소되는 것을 방지합니다.

정확한 센터링을 깨지 않도록 주석 처리 margin: -3px;했습니다 .portfolio-list li.

https://jsfiddle.net/ujrruyxq/7/

모바일보기의 이미지 :

데스크탑보기 :

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-19

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

반응 형 이미지 갤러리 만들기

반응 형 이미지 갤러리 만들기

반응 형 갤러리 HTML / CSS 만들기

마우스 오버시 텍스트가있는 반응 형 갤러리 미리보기 이미지

반응 형 이미지 만들기

반응 형 이미지 행 만들기

반응 형 이미지 만들기?

Masonry를 사용한 반응 형 이미지 갤러리

반응 형 순수 CSS 호버 이미지 갤러리

반응 형 이미지 갤러리를 부모의 높이로 강제 설정

반응 형 이미지 갤러리를 부모의 높이로 강제 설정

모바일에서 반응 형 회전식 미리보기 이미지 만들기

반응 형 웹 페이지 만들기

탐색 및 이미지 갤러리를 사용하여 간단한 반응 형 레이아웃을 만드는 방법은 무엇입니까?

CSS 배경 이미지를 반응 형으로 만들기

반응 형 코드 만들기 (이미지 위에 텍스트)

배너 / 이미지 반응 형 만들기

반응 형 그리드 열을 같은 높이로 만들기

반응 형 CSS 그리드 만들기

반응 형 CSS 리본 만들기

여러 그룹의 이미지 및 단락을 열 내에서 반응 형으로 만들기

고급 사용자 정의 필드 플러그인에서 반응 형 이미지 만들기

<td> 반응 형 테이블 만들기

내 반응 형 이미지 갤러리가 캡션을 올바르게 전환하지 않습니다.

캡션이있는 CSS 반응 형 사진 갤러리의 이미지 중앙에 배치

다양한 크기의 이미지에 적응하는 갤러리를 어떻게 만들 수 있습니까?

HTML 및 CSS 기반 갤러리, 이미지를 클릭 가능하게 만들 수 없음

이미지로 반응 형 그리드를 만드는 방법

동일한 크기의 두 열 반응 형 이미지 만들기

클릭 이벤트로 이미지 탭 갤러리 만들기

안드로이드, 이미지처럼 갤러리 만들기