반응 형 이미지로 정보 카드 만들기

정보 카드를 만들려고합니다. 화면이 크면 오른쪽 절반에 이미지가 있고 오른쪽에 텍스트가 있고 화면이 작 으면 상단에는 그림이 있고 하단에는 텍스트가 있습니다. 나는 position: absolute;top: 0;left: 0;bottom: 0;width: 40%을 추가하고 첫 번째 부분을 background-image: src;background-size: cover;으로 설정 한 다음 내용에 margin-left: 40%을 설정하여 작업을 수행 할 수있었습니다. 하지만 결국 궁극적으로 이런 구조는 자바 스크립트없이 스크린 크기에 적응하기가 어렵습니다. 나는 가능한 한 js를 사용하지 않기를 바란다. 그래서 나는 해결책을 온라인으로 찾았고 flexbox를 사용하고 object-fit CSS 속성을 사용하는 것과 같은 해답을 보았다. 당신은 바른 길에 있었다반응 형 이미지로 정보 카드 만들기

.signup-form-wrapper { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 400px; 
 
    width: auto; 
 
    border: 1px solid rgb(200, 200, 200); 
 
    margin: 10px 0px; 
 
} 
 
.img-wrapper { 
 
    height: 100%; 
 
    width: 50%; 
 
} 
 
.img-wrapper img { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
.content-wrapper { 
 
    display: inline-block; 
 
    max-width: 60%; 
 
    text-align: center; 
 
    padding: 0px 14%; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<body> 
 
    <div class='signup-form-wrapper'> 
 
    <div class='img-wrapper'> 
 
     <img src='http://www.parkermeridien.com/media/pool_fashion_f.jpg' /> 
 
    </div> 
 
    <div class='content-wrapper'> 
 
     <p>Hello, World!</p> 
 
    </div> 
 
    </div> 
 
</body>

출처

2016-12-20 modsoussi

: 여기에 내 코드입니다!

JavaScript가 없으면 미디어 쿼리 (실험 해 본 결과)가 올바른 방법입니다. 나는 img 대신에 background-image을 사용했다. 여기서는 요소를 나란히 배치하고 CSS의 맨 아래에있는 미디어 쿼리를 사용하여 부동을 해제하는 간단한 방법을 사용했다. 요소 스택.

또한 패딩/경계가 요소의 크기를 수정하는 것을 방지하기 위해 모든 요소에 대해 box-sizing: border-box;을 추가했습니다 (이는 좋은 습관입니다).

body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.signup-form-wrapper { 
 
    height: 350px; 
 
    border: 1px solid rgb(200, 200, 200); 
 
    margin: 10px 0px; 
 
} 
 
.img-wrapper { 
 
    height: 100%; 
 
    width: 40%; 
 
    float: left; 
 
    background-image: url('http://www.parkermeridien.com/media/pool_fashion_f.jpg'); 
 
    background-size: cover; 
 
} 
 
.content-wrapper { 
 
    float: left; 
 
    width: 60%; 
 
    text-align: center; 
 
    padding: 0px 14%; 
 
} 
 
@media (max-width: 768px) { 
 
    .img-wrapper, 
 
    .content-wrapper { 
 
    width: auto; 
 
    float: none; 
 
    height: 175px; 
 
    } 
 
}

<body> 
 
    <div class='signup-form-wrapper'> 
 
    <div class='img-wrapper'> 
 
    </div> 
 
    <div class='content-wrapper'> 
 
     <p>Hello, World!</p> 
 
    </div> 
 
    </div> 
 
</body>

출처

2016-12-20 22:19:45

말씀이 굉장합니다! '.signup-form-wrapper'의 높이를 설정하고 싶지 않거나'auto'로 설정하고 싶다면 어떻게해야할까요? '.img-wrapper'의 높이를'100 %'로 설정하면 더 이상 작동하지 않습니다. 이런 일이 일어나지 않도록 어떤 방법 으로든? – modsoussi

@modsoussi 만약 당신이'img'를 다시 사용하고 이미지의 크기로 요소의 높이를 정의하기를 원하지 않는다면이 방법으로 어딘가에 높이를 정의해야합니다. –

괜찮 았어! – modsoussi

반응 형 이미지로 정보 카드 만들기

답변

관련 문제