큰 이미지를 반응 적으로 만드시겠습니까?

Question

나는 내가 편집 (CSS 편집 중)이라는 WordPress 테마를 사용하여 데스크톱 및 모바일 사용자를위한 웹 사이트를 만들고 있습니다. 문제는 전면 이미지가 크고 해상도가 낮은 사용자 (예 : 휴대 전화)가 웹 사이트에 연결하면 이미지의 크기가 조정되고 하나의 작은 부분 만 표시된다는 것입니다.

다음

정상적인 웹 사이트 데스크탑 사용자가 방문 : 여기 내 문제를 설명 스크린 샷이다 작은 해상도를 가진 사용자가 웹 사이트 (예 : 휴대 전화)에 연결할 때 여기

그리고 웹 사이트를 수축

이미지에서 보았 듯이 이미지가 좋지 않습니다. 해상도가 낮아 전체 이미지가 해당 화면에 맞을 때 이미지를 축소 할 수 있습니까? 이것은 DIV에 대한 용기와 이미지

여기

* =Featured Content 
-------------------------------------------------------------- */ 

#featured { 
-moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    background-color: #ffffff; 
    border: 1px solid #e5e5e5; 
    border-radius: 40px; 
    padding-bottom: 40px; 
    width: 99.893617021277%; 
} 

#featured p { 
    font-size: 18px; 
    font-weight: 200; 
    line-height: 27px; 
    color: #8B0000; 
padding-top:250px; 
padding-left:50px; 
    text-align: left; 
width:100% 
} 
#featured p1 { 
    font-size: 18px; 
    font-weight: 200; 
    line-height: 27px; 
    font-style:italic; 
    color: #8B0000; 
padding-top:50px; 
padding-left:50px; 
    text-align: left; 
width:100%; 

} 

#featured-image { 
    margin: 40px 0 0 0; 
} 

#featured-image .fluid-width-video-wrapper { 
    margin-left: -20px; 
} 

.featured-image img { 
    margin-top: 44px; 
} 

클래스 일부 단락입니다 : 여기

내가이 사진을 표시하기 위해 사용하고 CSS입니다

.col-940new { 
    width: 100%; 
    height:460px; 
    background: url('uploads/19377249_ml-1024x6651.jpg'); 
} 

을 여기에 HTML입니다 이 요소에 대해 사용됩니다.

<div id="featured" class="grid col-940new"> 
     <div class="grid col-460"> 

      <h1 class="featured-title"> 
          </h1> 

      <h2 class="featured-subtitle"> 
          </h2> 

      <p> 


      </p> 



     </div><!-- end of .col-460 --> 

     <div id="featured-image" class="grid col-460 fit"> 



     </div><!-- end of #featured-image --> 

    </div><!-- end of #featured --> 

수정 :

아래의 댓글을 달았습니다. 문제를 해결할 수있는 방법을 적용했지만, 이제 사용자가 휴대 전화의 웹 사이트에 연결할 때 제거하려는 "공백"이 있습니다.

background-size: 100% auto; 

Answer 1

는 배경 이미지이기 때문에, 당신의 CSS

DEMO jsFiddle

.col-940new { 
    width: 100%; 
    height:460px; 
    background-image:url('uploads/19377249_ml-1024x6651.jpg'); 
    background-repeat:no-repeat; 
    background-size:contain; 
    background-position:center; 
} 

이 추가 :

코드는이 라인이 추가됩니다 제외하고 동일

Answer 2

background-size의 두 구성 요소가 모두 지정되어 있고 auto가 아닌 경우 : 배경 이미지가 지정된 크기로 렌더링됩니다. 이미지는 큰 크기 포함하거나 다루는 백그라운드 위치 영역에서 고유의 비율을 유지, 렌더링 :

배경 사이즈 포함하거나 커버 경우

. 이미지에 본질적인 비율이 없으면 배경 위치 지정 영역의 크기로 렌더링됩니다.

배경 크기가 auto 또는 auto auto 인 경우 : 이미지에 내재 치수가 모두있는 경우 해당 크기로 렌더링됩니다. 고유 한 차원이없고 본질적인 비율이없는 경우에는 배경 위치 지정 영역의 크기로 렌더링됩니다.크기가 없지만 비율이 있으면 포함 된 것처럼 대신 렌더링됩니다. 이미지에 고유 한 치수와 비율이있는 경우 해당 치수와 비율로 결정된 크기로 렌더링됩니다. 이미지에 고유 한 차원이 있지만 비례가없는 경우에는 고유 한 치수와 배경 위치 영역의 해당 치수를 사용하여 렌더링됩니다.

배경 크기는 하나 개의 자동차 부품 및 하나의 비 자동차 부품이있는 경우 : 이미지가 고유 비율이 경우, 지정된 차원을 사용하여 렌더링, 지정된 차원과에서 다른 차원을 계산을 내재 비율. 이미지에 본질적인 비율이없는 경우 해당 치수에 대해 지정된 치수를 사용하십시오. 다른 차원의 경우 이미지의 해당 내장 차원이 있으면 사용하십시오. 그러한 고유 차원이 없으면 배경 위치 지정 영역의 해당 치수를 사용하십시오. 귀하의 경우에는 source

당신은 모두 폭과 높이가 고유 값이 너무 모바일 장치에 대한 작동 할 수 background-size: 100% 100%;을 추가하려고있다. 하지만 이미지가 늘어나고 싶지 않다면 이미지가 늘어나고 싶지 않으면 마술처럼 마침내 커버를 추가하십시오.

background-size: 100% cover;