부트스트랩 카르셀 크기 조정 이미지
안녕하세요 저는 워드프레스 사이트에서 부트스트랩으로 회전목마를 만들려고 합니다.그 옆에 블록 링크를 4개 붙이고 싶습니다.블록이 있고 이미지는 잘 스크롤되고 있습니다만, 회전목마로 이미지의 높이가 변화하고 있다고 생각합니다.
이미지(640×360)를 가지고 있으며, 4블록의 높이를 90픽셀로 했습니다.블록이 회전목마 밑바닥과 같은 높이가 되도록 이렇게 했어요.블록이 너무 크다는 것만 빼면요.뭐가 문제인지 모르겠어요.그리고 모든 CSS를 검색해봤습니다.
코드는 다음과 같습니다.
<!--==========================================-->
<!-- Carousel -->
<!--==========================================-->
<div>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<!--Carousel item 1-->
<div class="item active">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/ej-manuel.png" alt="buffalo-skyline" width="640" height="360" />
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<!--Carousel item 2-->
<div class="item">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/image3.jpg" width="640" height="360" />
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<!--Carousel item 3-->
<div class="item">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" width="640" height="360" >
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<!--==========================================-->
<!-- Side Buttons -->
<!--==========================================-->
<div>
<ul class="nav nav-tabs nav-stacked">
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 4</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 5</a></li>
</ul>
</div>
이미지 사이즈가 변경되는 이유는 유동적이기 때문입니다.다음 두 가지 방법이 있습니다.
다음과 같이 CSS를 사용하여 이미지에 고정 치수를 지정합니다.
.carousel-module > .item > img {폭: 1024px;높이: 360px;}두 번째 방법은 다음과 같습니다.
.carusel {폭: 1024px;높이: 360px;}
이것을 css에 추가합니다.
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
}
다음 코드를 CSS에 입력합니다.이것은 부트스트랩4에서 동작합니다.
.w-100 {
width: 100% !important;
height: 75vh;
}
저도 같은 문제가 있었어요.모든 이미지는 높이와 폭이 같아야 합니다.홈 섹션의 크기 조정 옵션을 사용하여 창의 페인트 응용 프로그램을 변경한 다음 CSS를 사용하여 이미지 크기를 조정할 수 있습니다.태그 내부의 폭과 높이 속성이 응답하지 않기 때문에 이 문제가 발생할 수 있습니다.
웹 페이지 프로그래밍의 머리 부분에 다음 코드를 입력합니다.
<head>
<style>.carousel-inner > .item > img { width:100%; height:570px; } </style>
</head>
이미지 태그의 치환
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" style="width:640px;height:360px" />
스타일 속성을 사용하고 이미지 높이와 너비를 설정하는 이미지에 대한 css 클래스가 없는지 확인합니다.
이 코드를 사용하여 이미지 슬라이더의 높이를 전체 화면/최대 100 보기 포트 높이로 설정합니다.이것은 부트스트랩 카르셀 테마 슬라이더를 사용할 때 도움이 됩니다.이미지 폭 100%와 높이 100vh를 설정하기 위해 다음 클래스를 사용하는 높이에 문제가 있습니다.
<img class="d-block w-100" src="" alt="" >이미지 태그에서 이 클래스를 사용하고 스타일 태그 또는 style.css 파일에 css 코드에 따라 씁니다.
.carousel-inner > .carousel-item > img {
height: 100vh;
}
수업을 하다img-fluid고객님께div carousel-item.마지막으로 다음과 같습니다.
<div class="carousel-item active img-fluid">
<img class="d-block w-100" src="path to image" alt="First slide">
</div>
이건 나한테 효과가 있었어max-height이미지를 잘라내는 대신 자동 조정할 수 있습니다.
<div class="carousel-item">
<img src="image-link" class="d-block w-100" alt="image" style="max-height:100vh;">
</div>
같은 문제가 발생하여 여기에 제시된 CSS 솔루션은 모두 작동하지 않았습니다.
가로폭을 설정하지 않고 높이="360"을 설정했습니다.제 사진은 크기가 달라서 이렇게 조절은 할 수 있지만 높이는 일정하게 유지돼요.
이 css는 부트스트랩5 (폭과 높이를 변경할 수 있습니다)에 적합합니다.
.carousel-inner > .carousel-item > img {
width:640px;
height:360px;
}
몇 년 전에 이런 일이 있었는데..하지만 난 할 수 있어이미지의 폭과 높이를 원하는 대로 설정하기만 하면 됩니다.내 말은 회전목마 이너에 있는 당신의 이미지는... 스타일 속성을 추가하지 말고, 이런 식으로 당신의 코드가 올바르게 작동하는지 확인하라는 것입니다.행운을 빌어요
언급URL : https://stackoverflow.com/questions/17357306/bootstrap-carousel-resizing-image
'programing' 카테고리의 다른 글
| nginx가 있는 워드프레스 색인에서는 403이 금지되어 있으며, 나머지 페이지는 정상적으로 동작합니다. (0) | 2023.02.21 |
|---|---|
| Python JSON 덤프 / .txt에 추가 (각 변수 새 줄에 포함) (0) | 2023.02.21 |
| ajax call php를 통해 파일 다운로드 (0) | 2023.02.21 |
| MongoDB 컬렉션 서브셋을 다른 컬렉션에 저장 (0) | 2023.02.21 |
| Google Maps API는 AJAX를 사용할 때만 "Uncatched ReferenceError: google is not defined"를 발생시킵니다. (0) | 2023.02.21 |