이미지 파일이 깨져서 등록되는데 어떻게 손봐야 되나요?ㅠ

이미지 파일이 깨져서 등록되는데 어떻게 손봐야 되나요?ㅠ

QA

이미지 파일이 깨져서 등록되는데 어떻게 손봐야 되나요?ㅠ

본문

    <style>
        #bo_place { width: 100%; padding: 10px; margin:10px 0; float: left; border: 1px solid #DDD; }
        #bo_place > b { font-size: 13px; display: inline-block; height: 40px; line-height: 40px; vertical-align: middle; margin: 0 20px; }
        #bo_place > .frm_input { margin-left: 10px; }
        
        #mall_item_list { width: 100%; float: left; }
        #mall_item_list * { position: relative; } 
        #mall_item_list > ul { width: 100%; float: left; }
        #mall_item_list > ul > li { width: calc(calc(100% - 180px) / 4); float: left; margin-right: 60px; margin-top: 15px; cursor: pointer; margin-bottom: 30px; }
        #mall_item_list > ul > li:nth-of-type(4n) { margin-right: 0; }
        #mall_item_list > ul > li > .img { width: 100%; float: left; padding-bottom: 66%; overflow: hidden; }
        #mall_item_list > ul > li > .img > img { min-width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }
        #mall_item_list > ul > li > .name { width: 100%; float: left; text-align: center; font-size: 21px; font-weight: bold; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 15px; }
        #mall_item_list > ul > li > .point { width: 100%; float: left; text-align: center; font-size: 13px; font-weight: bold; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 10px; }
        #mall_item_list > ul > li > .price { width: 100%; float: left; text-align: center; font-size: 14px; font-weight: bold; color: #cb9037; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 5px; }
        #mall_item_list > ul > li > .price > span { color: #AAA; }
        
        .noDataArea { border-bottom: 0; }
        
        @media (max-width: 800px){
/*            #mall_item_list > ul > li { width: calc(calc(100% - 15px) / 2); margin-right: 15px; }*/
            #mall_item_list > ul > li { width: 100%; margin-right: 0; }
/*            #mall_item_list > ul > li:nth-of-type(2n) { margin-right: 0; }*/
        }
    </style>
 

 

 

사진원본을 등록하면 원본을 프레임에 맞게끔 보여지는게 아니라

원본 픽셀이 좀더 초과되거나 하면 화면에 짤려서 부분적인 이미지만 보여져요 어디를 손봐야 될까요?

이 질문에 댓글 쓰기 :

답변 3

#mall_item_list > ul > li > .img > img { min-width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }
위 부분을 아래 처럼 수정해 보세요

#mall_item_list > ul > li > .img > img { width: 100%;  height: 100%;  object-fit: cover; }

초보분들이 흔히들 착각하는 문제.

대충 여기쯤이겠지 하는 CSS 긁어다 놓고 안된다함.

 

프레임이 어떤 구조인지 적어도 스샷이나 URL 정도는 있어야 명확한 진단을 내리죠..

그리고 CSS 는 가장 나중에 지정한 스타일만 반영됩니다.

해당 부분이 원인이 아닐수도 있어요..

 

그러니 꼭 URL 정도는 올리세요.

그리고 컨트롤+쉬프트+C 누르시고 마우스로 해당 부분 찍어보시면 찌그러지는 스타일이

어디에 영향을 받는지 알수 있습니다.

 

1982090578_1711725622.1872.png

 

그걸로 내가 원하는 곳이 왜 안되는지 찾아보세요.

1. 초과되는 경우 - 이미지 너비가 절대크기 px로 지정된 경우 발생 가능.

2. 짤리는 경우 - 해당요소가 절대크기 px인데 부모요소애 overflow:hidden 적용된 경우 발생 가능.

3. 수정할 CSS 선택자 찾기 https://homzzang.com/b/css-251

4. 수정한 거 반영시키기 https://homzzang.com/b/css-248

답변을 작성하시기 전에 로그인 해주세요.
전체 76
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT