img태그 background-img 크기 변경 질문

본문 바로가기

img태그 background-img 크기 변경 질문

작성일 2023.06.11댓글 1건
    게시물 수정 , 삭제는 로그인 필요

안녕하세요! ㅎㅎ 1:1로 질문 다시올립니다. 감사합니다 

1. img 태그 사용할 때 가로값만 지정하면 비율대로 세로값이 지정되잖아요 !
그러면 가로값,세로값을 지정하면 비율이 깨지거나 할텐데
보통은 포토샵에서 이미지 크기를 맞춘 후에 img태그로 넣는게 좋겠죠 ??

2. 만약에 크기가 제각각이라면 background-img의 cover라는 css속성을 부여해서 이미지를 짜른 후 사용해야한다고 하셨는데 이미지를 짜를때는 css속성에서 cover주고, 이미지의 background-size를 부여해서 짜르는 방법으로 하면 될까요?

3. background-img가아닌 img태그를 사용할때 이미지가 제각각크기일때는
비율에 맞춰서 이미지크기를 수정하는 방법은 없을까요 ?

4. 그리고 img태그를 사용할때 img를 감싸고있는 태그의 크기는 보통 몇으로 잡으시는지 궁금합니다. img태그에 넣을 이미지크기와 감싸는태그의 크기를 같게 설정하시는지와 이유도 궁금해요 !

5. 마지막으로 여쭙고싶은게 있는데 background 속성에 여러가지가 있잖아요
background-image,size등 
이거를 한번에 합쳐서 적을 수 있는걸로 아는데 
한번씩 안먹을때가 있더라구요.
합쳐서 적으면 안먹는 이유가 있을까요 ?? 
다 따로 적는게 좋은지 궁금합니다 ! 



profile_image 익명 작성일 -

1. img 태그 사용할 때 가로값만 지정하면 비율대로 세로값이 지정되잖아요 !

그러면 가로값,세로값을 지정하면 비율이 깨지거나 할텐데

보통은 포토샵에서 이미지 크기를 맞춘 후에 img태그로 넣는게 좋겠죠 ??

​

상황에 따라 다릅니다 예를 들어 아이콘 같은경우는 본인이(작업자가) 사용하기 편하게 크기를 지정해서 가져와서 사용합니다 하지만 사용자가 이미지를 업로드하는 경우는 이미지 비율이 어떤식으로 들어올지 알수가 없겠죠 이부분은 개발쪽에서 이미지 업로드시 크롭해서 크기를 맞추는 경우도 있고 퍼블에서 어떤 이미지든 cover 효과처럼 크롭되게 만들수도 있죠 그래서 사전에 어떤식으로 처리될지 확인하는게 좋습니다

​

2. 만약에 크기가 제각각이라면 background-img의 cover라는 css속성을 부여해서 이미지를 짜른 후 사용해야한다고 하셨는데 이미지를 짜를때는 css속성에서 cover주고, 이미지의 background-size를 부여해서 짜르는 방법으로 하면 될까요?

​

background-size: cover를 사용한다는 의미입니다

​

3. background-img가아닌 img태그를 사용할때 이미지가 제각각크기일때는

비율에 맞춰서 이미지크기를 수정하는 방법은 없을까요 ?

​

background-size: cover처럼 같은 기능은 object-fit: cover; 를 사용하시면 됩니다

전에 보여드린 코드를 수정해서 만들었습니다 참고하세요

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>card layout</title> <style> /* reset */ * { margin: 0; padding: 0; box-sizing: border-box; color: #000;} ol,ul,li { list-style: none;} a { text-decoration: none;} img { vertical-align: top;} /* layout */ .card_area { width: 90%; max-width: 1024px; margin: 50px auto;} .card_list { display: flex; gap: 20px; flex-wrap: wrap;} .card_item { width: calc((100% - (20px * 3)) / 4); border: 1px solid #000;} .card_item .thumb { overflow: hidden; position: relative;} .card_item .thumb::before { content: ''; display: block; padding-top: 100%;} .card_item .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s all;} .card_item:hover .thumb img, .card_item:focus .thumb img { transform: scale(1.1);} .card_item .info_box { display: flex; flex-direction: column; gap: 10px; padding: 5px;} .img_box { text-align: center;} @media screen and (max-width: 1024px){ .card_item { width: calc((100% - (20px * 2)) / 3);} } @media screen and (max-width: 678px){ .card_item { width: calc((100% - (20px * 1)) / 2);} } @media screen and (max-width: 480px){ .card_item { width: 100%;} } </style> </head> <body> <div class="card_area"> <ul class="card_list"> <li class="card_item"> <a href="#" class="card_link"> <div class="thumb"> <img src="https://picsum.photos/250/250?1" alt=""> </div> <div class="info_box"> <span class="txt">상품명1</span> <span class="cost">1000원</span> </div> </a> </li> <li class="card_item"> <a href="#" class="card_link"> <div class="thumb"> <img src="https://picsum.photos/250/500?2" alt=""> </div> <div class="info_box"> <span class="txt">상품명2</span> <span class="cost">1000원</span> </div> </a> </li> <li class="card_item"> <a href="#" class="card_link"> <div class="thumb"> <img src="https://picsum.photos/500/250?3" alt=""> </div> <div class="info_box"> <span class="txt">상품명3</span> <span class="cost">1000원</span> </div> </a> </li> <li class="card_item"> <a href="#" class="card_link"> <div class="thumb"> <img src="https://picsum.photos/250/700?4" alt=""> </div> <div class="info_box"> <span class="txt">상품명4</span> <span class="cost">1000원</span> </div> </a> </li> </ul> </div> <hr/> <div class="img_box"> <img src="https://picsum.photos/250/250?1" alt=""> <img src="https://picsum.photos/250/500?2" alt=""> <img src="https://picsum.photos/500/250?3" alt=""> <img src="https://picsum.photos/250/700?4" alt=""> </div> </body> </html>

가상 선택자에 padding-top을 넣어서 비율을 1:1 로 만든다음 img태그는 앱솔루트로 정사각형형태로 가득채운후 object-fit: cover; 속성으로 짤라줘서 비율을 맞춥니다

​

​

4. 그리고 img태그를 사용할때 img를 감싸고있는 태그의 크기는 보통 몇으로 잡으시는지 궁금합니다. img태그에 넣을 이미지크기와 감싸는태그의 크기를 같게 설정하시는지와 이유도 궁금해요 !

​

태그의 크기는 디자인 시안에따라 다르죠 디자인시안에 맞춰서 넣은거니까요

이미지를 감싸는 태그를 크기를 같게하는게 아니라 감싸는 태그를 배치하는 용도로 쓰고 있어서 안에 있는 이미지는 100%로 사용하고 있는거죠

​

5. 마지막으로 여쭙고싶은게 있는데 background 속성에 여러가지가 있잖아요

background-image,size등

이거를 한번에 합쳐서 적을 수 있는걸로 아는데

한번씩 안먹을때가 있더라구요.

합쳐서 적으면 안먹는 이유가 있을까요 ??

​

background 축약순서라고 구글에 검색해보세요

아마 순서가 ​잘못됐거나 표기방법이 잘못될수 있어요

연관된 질문 답변 리스트

내용안의 img 태그 검색방법 질문입니다

... 모든 img 태그를 검사해서 가장 큰 가로 크기를 갖는... 질문자께서는 제가 느끼기에 javascript... php는 javascript를 변경시킬 수 있지만 javascript는 php를 변경시키지...

img 관련입니다.

... 이미지일경우 태그 따로 하셔야 합니다. *{ padding: 0px; border: 0px; } $(function(){ $('img[name=img]').resizable(); // 이미지 크기변경 $('.img...

때 img 속성을 변경하고 싶습니다.

... 후 img 속성의 width와 height값을 페이지 크기보다 클... 질문을 미리 상세하게 올려주시지요.. 답변 먼저 단... 내용내의 이미지 태그를 읽어오는 수 밖에 없을듯 합니다....

HTML(폰트 태그) 질문입니다!!!!

... 긋는 태그 글자 크기를 크게 변경 글자 크기를 작게 변경 글자를 깜박이게... 표 만들기 태그 1행 1열 1행 2열 2행 1열 2행 2열 - background : 테이블 배경...

간단한 이미지 태그 질문이요

... 정렬 하고싶은데 어느 태그를 삽입해야 되나요?... 원하시는 크기만큼 font-size: 변경 하시면... bodys {background-color:black;font-family:Helvetica;}; 닐찌...