CSS - 응답 이미지 크기

Question

나는 모든 이미지를 만들려고 노력하고는 max-width: 400px;을 동시에 친화적 인 모바일 즉 반응합니다.

다음 스타일링은 이미지를 반응 적으로 만들었지 만 max-width: 100%;는 이미지가 원하는 것보다 훨씬 크기가 다양하도록 만들어 주므로 적절한 해결책이 아닙니다. 내가 필요로 무엇

max-width: 100%; 
Width: auto; 
height: auto; 
border: 1px #DFDFDF solid; /* Just to make the image look nicer */ 

다음 행 (그러나 응답)를 따라 뭔가 : 나는 많은 다른 것들을 시도했습니다

max-width: 400px; 
width: auto; 
height: auto; 
border: 1px #DFDFDF solid; /* Just to make the image look nicer */ 

,하지만 난 그냥 일을 얻을 수 없습니다.

도움 주셔서 감사합니다.

Answer 1

는 기본적으로 이미지는 부모의 폭이되고 싶어하지만, 당신이 400 픽셀 이상 갈 그 폭을 모자 싶다.

max-width: 400px; 
width: 100%; 
height: auto; 
border: 1px #DFDFDF solid; /* Just to make the image look nicer */ 

깊이에 좀 더하고보다 효율적으로 제어 할하려면 모바일 디스플레이를 대상으로 이것을 분할 및 미디어 쿼리를 사용할 수 있습니다

// Desktop 
.your-img { 
    max-width:400px; 
    width:100%; 
    height:auto; 
    border:1px solid #dfdfdf; 
} 

// Mobile 
@media (max-width:768px) { 
    .your-img { 
     width:auto;  // Get the original width of the image 
     max-width:100%; // So the image can only be as wide as the device max 
     display:block; // Image becomes a block element 
     margin:0 auto; // Centre image if smaller than device width 
    } 
}