부트 스트랩에 사진을 삽입하는 방법

Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.

부트 스트랩에 이미지를 삽입하는 방법

사진을 직접 삽입하십시오

부트 스트랩에서는 HTML img 태그를 사용하여 이미지를 직접 삽입 할 수 있습니다.

 <code class="html"><img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="부트 스트랩에 사진을 삽입하는 방법"></code>

부트 스트랩 이미지 구성 요소 사용

Bootstrap은 반응 형 이미지를 제공하고 테두리, 둥근 모서리, 그림자 및 기타 스타일을 설정할 수있는 이미지 구성 요소를 제공합니다.

 <code class="html"><div class="img-container"> <img class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="부트 스트랩에 사진을 삽입하는 방법"> </div></code>

이미지 크기를 설정하십시오

img-fluid 클래스를 사용하여 다른 장치와 화면 크기에서 이미지를 반응 적으로 스케일로 만들 수 있습니다.

 <code class="html"><img class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="부트 스트랩에 사진을 삽입하는 방법"></code>

경계를 설정하십시오

img-bordered 클래스를 사용하여 이미지에 테두리를 추가 할 수 있습니다.

 <code class="html"><img class="img-bordered lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="부트 스트랩에 사진을 삽입하는 방법"></code>

둥근 모서리를 설정하십시오

img-rounded 클래스를 사용하여 둥근 모서리를 이미지에 추가 할 수 있습니다.

 <code class="html"><img class="img-rounded lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="부트 스트랩에 사진을 삽입하는 방법"></code>

그림자를 설정하십시오

shadow 클래스를 사용하여 이미지에 그림자를 추가 할 수 있습니다.

 <code class="html"><img class="shadow lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="부트 스트랩에 사진을 삽입하는 방법"></code>

이미지를 조정하고 배치하십시오

CSS 스타일을 사용하여 이미지를 크기를 조정하고 배치 할 수 있습니다.

 <code class="css">img { width: 50%; float: left; }</code>

배경 이미지를 사용하십시오

background-image CSS 속성을 사용하여 배경 이미지 CSS 속성을 사용할 수 있습니다.

 <code class="css">.my-class { background-image: url("image.jpg"); }</code>

위 내용은 부트 스트랩에 사진을 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!