이미지를 반응 적으로 유지하고 동일한 관점을 유지하는 방법

Question

그래서 응답 성이 좋은 웹 사이트를 만들려고 노력하고 있습니다.

그러나 이미지 너비와 높이를 동일하게 유지하는 데 문제가 있습니다 (이미지는 정사각형입니다).

div 안에 "pageContainer"라는 div가 있는데,이 div에는 "eachBlog"라는 div가 여러 개 있습니다. 이 안에는 이미지 div와 텍스트 div가 있습니다. 페이지가 너비가 커짐에 따라 사이트가 반응하므로 이미지도 마찬가지입니다. 그러나 이것은 제곱 된 이미지의 비율을 떨어 뜨립니다 (사각형으로 만듭니다).

나는이 불쌍한 내 코드 :(

그래서 내가하려고하는 것은 아래로 확신 그래서 이미지가 수행하고처럼 보이는 유지 사업부 "eachBlog는"폭과 높이가 성장함에 따라

<div class="eachBlog"> 
     <div class="image"> 
      <img src="image.jpg"> 
     </div> 
     <div class="text"> 
      <h1 id="title"> Shifted Thoughts- Mazde </h1> 
      <p id="sample"> /* text */ </p> 
      <p id="more"> READ MORE </p> 
      <div class="bottom"> 
      <p id="tag"> HIP HOP </p> 
      <p id="date"> 5 feb </p> 
      </div> 
     </div> 
    </div> 

는 CSS :

.pageContainer{ 
    width: 80%; 
    height: 80%; 
    display: block; 
    margin: 0 auto; 
    } 
    .eachBlog{ 
     position: relative; 
     background: #ffffff; 
     width: 48%; 
     height: 20%; 
     float: left; 
     margin-top: 2%; 
     margin-right: 2%; 
     } 

     .image{ 
     width: 37%; 
     height: 100%; 
     float: left; 
     } 
     .image img{ 
      width: 100%; 
      height: 100%; 
     } 

     .text{ 
     width: 55%; 
     height: 100%; 
     position: relative; 
     float: left; 
     padding-left: 4%; 
     padding-top: 1%; 
     } 

B 사각형 : 여기

는 HTML의 ig 미리 감사드립니다 !!

Answer 1

width/height 대신 max-width 및 max-height을 설정하십시오.

.image img{ 
    max-width: 100%; 
    max-height: 100%; 
    width: auto; 
    height: auto; /* nnot sure if width/height are necessary here */ 
}