이미지를 원형으로 표시하는 방법
절차
①HTML을 기술한다
②CSS를 기술한다
③ 미리보기로 표시 확인
CSS를 작성하기
copy_practice.css
/*main_picture(親要素)のデザイン*/
.main_picture {
width: 100px;
height: 100px
}
/*mainのロゴ写真の円形の表示(子要素の設定)*/
.main_picture img {
width: 100px;
height: 100px;
border-radius: 100px;
}
포인트!
①화상을 원형으로 하여 종횡비를 유지하고 싶은 경우는 부모 요소의
width 와 height 와 자 요소의 width 와 height 에는 같은 값을 지정할 필요가 있습니다.②
border-radius 속성은 width와 height의 값과 같은 값을 지정합니다.HTML 작성하기
copy_practice.html
<div class="main_picture">
<img src="flower_picture.jpg" alt="花畑の風景">
</div>
완성도
아래와 같은 이미지의 상태가 됩니다.
참고 사이트 이하의 사이트를 참고로 했습니다. · CSS로 이미지를 자르는 방법
· 이미지를 둥글고 원형으로 감아서 표시하는 CSS
Reference
이 문제에 관하여(이미지를 원형으로 표시하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/furu8492/items/f8bd16e5ad271da30ab9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
