flexslider 이미지 크기 커버

내 개인 사이트의 경우 http://stevengeorgeharris.com 여러 div가 쌓인 단일 페이지 디자인을 만들었습니다. div는 너비 : 100 % 및 높이 : 100 %이므로 각 div 내에서 브라우저와 함께 확장되므로 flexsclider를 사용하여 전체 화면 슬라이드 쇼를 만듭니다.flexslider 이미지 크기 커버

내 문제는 브라우저가 아래로 공백을 남겨두고 flexslider 컨테이너 내에서 이미지의 너비가 좁아지는 경우입니다.

이것은 flexslider 이미지 용 CSS입니다.

.flexslider .slides img {width: 100%; height:auto; display: block;}

이 이미지는 미디어 쿼리를 사용해야합니다이를 위해이 http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php

출처

2013-02-18 Steven_Harris_

HTML에 100 % 높이를 설정했음을 확인했습니다. 이것은 afaik 작동하지 않습니다. 고정 된 높이를 설정해야합니다. 부모 중 적어도 한 명이 고정 된 높이를 가지지 않으면 백분율 높이가 전혀 작동하지 않습니다. – Calvin

처럼 행동 할 어쨌든입니다. 미디어 쿼리에 대한 자세한 내용은 여기를 참조하십시오. https://developer.mozilla.org/en-US/docs/CSS/Media_queries

내가 원하는대로했습니다. 다른 사진에 당신이 여기에 최종 결과를 볼 수 있습니다은 "최소 폭은"더해야한다고

img { 
    width: 100%; 
    height : 100%; 
} 

@media (min-width: 2000px) { 
    img{ 
    height: auto; 
    } 
}

공지 사항 : 여기

http://jsbin.com/olakit/2 코드입니다 (원본 사진은 1024 X 683 픽셀입니다) 사진 너비보다.

출처

2013-02-19 00:45:00 Sahar

flexslider 이미지 크기 커버

답변

관련 문제