전각 이미지를 반응 적으로 만드는 방법은 무엇입니까? (스케일/스트레치가 없음)

응답 성이 뛰어난 디자인에 대해 배웠고 매우 간단합니다. 그러나 내가 이해하지 못하는 것이 하나 있습니다. 내 홈페이지의 중심에 큰 fullwidth 이미지가 있습니다. 그것은 특정 크기를 가지고, CSS는 픽셀 단위로 크기를 요구하는 것 같습니다. - %로 입력하면 표시되지 않습니다. 지금은, 그러나전각 이미지를 반응 적으로 만드는 방법은 무엇입니까? (스케일/스트레치가 없음)

.picture-main { 
    /*background-color: gray;*/ 
    background-image: url("./images/homepage_main_picture.png"); 
    background-repeat: no-repeat; 

    background-position: center; 
    background-size: cover; 

    padding-right: 0; 
    margin-right: 0; 
    padding-left: 0; 
    margin-left: 0; 
    width: 100%; 
    height: 250px; 
}

이 응답을 확인하기 위해 내 브라우저 창의 크기를 변경하는 경우, 그것은 끔찍한 찾고, 그냥 따라 & 스트레칭을 확장하고 이미지가 왜곡 될 것이기 그래서

. 누구에게 해결책이 있습니까?

추신 : 여기에 다른 답변 stackoverflow 내 질문에, 또는 적어도 그렇게 생각하지 주소 참고. 예 : this one here 또한 "how-to-make-a-full-width-image-responsive"라는 제목이 붙어 있습니다. - 어쩌면 내 질문을 잘못 말한 것일까?

출처

2016-11-23 George Welder

CSS에서는 –

에'background-size : cover;'를 사용하지 말고';;'를 사용하지 마십시오. 여기에이 파일을 찾지 못했음을 분명히 지적했을 때 왜 이것을 중복으로 표시합니까? 연결된 링크가 다른가요? 두배 ; 코드에서가 아니라 내 stackoverflow 게시물에 오류가있었습니다. 배경 크기 커버는 브라우저 창 크기에 따라 늘어나고 이상하게 보이는 문제를 해결하지 못합니다. –

죄송합니다. 제가 누락 된 것 같습니다. 재개 ... –

그런 식으로 background-size: contain;을 사용해보세요. 배경 이미지가 그 비율을 유지하게됩니다. 이것에 대해 갈

.picture-main { 
 
    background: url("//placehold.it/500x300/cf5") no-repeat 50%; 
 
    padding: 0; margin: 0; 
 
    width: 100%; 
 
    height: 250px; 
 
} 
 

 
.contain{ 
 
    background-size: contain; 
 
} 
 
.cover{ 
 
    background-size: cover; 
 
}

Example using background-size: contain 
 
<div class="picture-main contain"></div> 
 

 
Example using background-size: cover 
 
<div class="picture-main cover"></div>

출처

2016-11-23 23:34:21

나를 도우려는 데 많은 감사드립니다! 방금 시도했지만 이미지의 전체 너비가 제거됩니다. 그래서 나는 지금 각면에 국경을 가지고있다. –

한 가지 방법은 폭의 비율로 요소의 높이를 설정하는 것입니다.

예컨대 :

1) 따라서 소자의 폭은 뷰포트의 폭의 100 %이다.

2) 원본 이미지가 너비가 반으로 높으면 요소의 높이를 뷰포트 너비의 절반으로 설정할 수 있습니다.

.picture-main { 
height:50vw; 
}

1 vw = 뷰포트 너비의 1 비율. 50vw = 뷰포트 너비의 50 %입니다.

이렇게하면 요소에 올바른 크기와 비율이 적용됩니다. "background-size : cover;" 그런 다음 배경이 채워지는지 확인합니다.

출처

2016-11-24 18:08:52

전각 이미지를 반응 적으로 만드는 방법은 무엇입니까? (스케일/스트레치가 없음)

답변

관련 문제