센터 정렬 된 div, 크기 조정 이미지와 투명 효과

나는이 페이지를 그들이 각각의 노란색 블록 내부에 맞도록센터 정렬 된 div, 크기 조정 이미지와 투명 효과

자동으로 이미지 크기를 조정하는 방법
노란색 테두리 블록을 자동으로 크기 조정하여 파란색 테두리를 만드는 방법
파란색 테두리 안에 노란색 블록을 가운데 정렬하는 방법

,451,515,

<div class="container"> 
<div class="block"> 
    <a href="https://imgur.com/BTMfPIm.jpg"> 
     <img src="https://imgur.com/BTMfPIm.jpg" class="img"> 
     <div class="shade"></div> 
    </a> 
</div> 
<div class="block"> 
    <a href="https://imgur.com/eoSvnK8.jpg"> 
     <img src="https://imgur.com/eoSvnK8.jpg" class="img"> 
     <div class="shade"></div> 
    </a> 
</div> 
<div class="block"> 
    <a href="https://imgur.com/u1gFAvc.jpg"> 
     <img src="https://imgur.com/u1gFAvc.jpg" class="img"> 
     <div class="shade"></div> 
    </a> 
</div>

.container { 
    border: 9px solid #55f; 
    width: 88%; 
    height: 40px; 
    margin: 0 auto; 
} 
.block { 
    position: relative; 
    width: 18%; 
    height: 300px; 
    border: 9px solid red; 
    float: left; 
    margin: 25px; 
} 
.img { 
    display: block; 
} 
.shade { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    opacity: 1; 
    background-color: rgba(225,255,0,0.7); 
}

출처

2017-11-23 Luigi P.

나는 광산과 user181934의 코드를 통과하는 문제를 해결했다. 또한, 나는 정당화 된 내용과 정렬 된 항목을 사용하여 요소를 중앙에 배치했습니다. 여기 https://jsfiddle.net/pnLg2mrh/23/

전체 코드 :

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.container { 
    display: flex; 
    justify-content:center; 
    align-items:center; 
    background: -webkit-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%); 
    background: -o-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%); 
    background: -ms-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%); 
    background: -moz-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%); 
    background: linear-gradient(to right, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%); 
    width: 72%; 
    height: 100px; 
    margin: 0 auto; 
    margin-top: 160px; 
    } 
.block { 
    align: center; 
    position: relative; 
    width: 19%; 
    border: 3px solid black; 
    -webkit-border-radius: 33px; 
    -moz-border-radius: 33px; 
    border-radius: 33px; 
    float: left; 
    margin: 6px; 
    } 
.img { 
    width: 100%; 
    display: block; 
    border-radius: 31px; 
    } 
.shade { 
    position: absolute; 
    border-radius: 30px; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    opacity: 1; 
    transition: .9s ease; 
    background-color: rgba(225,0,0,0.8); 
    } 
.block:hover .shade { 
    opacity: 0; 
    } 
</style> 
</head> 
<body> 

<div class="container"> 
    <div class="block"> 
     <a href="https://imgur.com/M6gGG7x.jpg"> 
      <img src="https://imgur.com/M6gGG7x.jpg" class="img"> 
      <div class="shade"></div> 
     </a> 
    </div> 
    <div class="block"> 
     <a href="https://imgur.com/kfpD5cv.jpg"> 
      <img src="https://imgur.com/kfpD5cv.jpg" class="img"> 
      <div class="shade"></div> 
     </a> 
    </div> 
    <div class="block"> 
     <a href="https://imgur.com/YlbMNNw.jpg"> 
      <img src="https://imgur.com/YlbMNNw.jpg" class="img"> 
      <div class="shade"></div> 
     </a> 
    </div> 
</div> 

</body> 
</html>

이 jsfiddle의 결과입니다

출처

2017-11-24 09:51:06

왜 background-image로 이미지를 만들 해달라고하고 background-size:cover 제공 :

.container { 
 
\t border: 9px solid #55f; 
 
\t width: 88%; 
 
\t height: 40px; 
 
\t margin: 0 auto; 
 
} 
 
.block { 
 
\t position: relative; 
 
\t width: 18%; 
 
\t height: 300px; 
 
\t border: 9px solid red; 
 
\t float: left; 
 
\t margin: 25px; 
 
} 
 
.img { 
 
\t display: block; 
 
    width:100%; 
 
} 
 
.velo { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    opacity: 1; 
 
    transition: .9s ease; 
 
    background-color: rgba(225,255,0,0.7); 
 
} 
 
.container .block { 
 
    background-size:cover; 
 
} 
 
.container .block:nth-child(1){ 
 
    background-image:url('https://imgur.com/BTMfPIm.jpg'); 
 
} 
 
.container .block:nth-child(2){ 
 
    background-image:url('https://imgur.com/eoSvnK8.jpg"'); 
 
} 
 
.container .block:nth-child(3){ 
 
    background-image:url('https://imgur.com/u1gFAvc.jpg'); 
 
}

<div class="container"> 
 
\t <div class="block"> 
 
\t \t <a href="https://imgur.com/BTMfPIm.jpg"> 
 
\t \t \t <div class="velo"></div> 
 
\t \t </a> 
 
\t </div> 
 
\t <div class="block"> 
 
\t \t <a href="https://imgur.com/eoSvnK8.jpg"> 
 
\t 
 
\t \t \t <div class="velo"></div> 
 
\t \t </a> 
 
\t </div> 
 
\t <div class="block"> 
 
\t \t <a href="https://imgur.com/u1gFAvc.jpg"> 
 

 
\t \t \t <div class="velo"></div> 
 
\t \t </a> 
 
\t </div> 
 
</div>

출처

2017-11-23 22:31:18 M0ns1f

은 당신이 플렉스 박스를 사용할 수 있습니다 니펫을 참조 이. like :

.container { 
    display: flex; 
    border: 9px solid #55f; 
    width: 88%; 
    margin: 0 auto; 
} 
.block { 
    position: relative; 
    flex-grow: 1; 
    border: 9px solid red; 
    float: left; 
    margin: 25px; 
} 
.img { 
    display: block; 
    width: 100%; 
} 
.velo { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    opacity: 1; 
    transition: .9s ease; 
    background-color: rgba(225,255,0,0.7); 
}

출처

2017-11-23 22:36:33

센터 정렬 된 div, 크기 조정 이미지와 투명 효과

답변

관련 문제