Làm cách nào để đặt chiều cao động trong CSS?

Xin chào @jokermanu. Tôi rất vui vì bạn thấy plugin này hữu ích. Bạn có thể tạo độ cao cố định bằng CSS tùy chỉnh. Không có tùy chọn cho độ rộng động, tuy nhiên tôi sẽ thêm tính năng này để có thể triển khai trong phiên bản tương lai. Tại thời điểm này, băng chuyền sử dụng kiểu dáng tối thiểu, mang lại cho nhà phát triển tất cả quyền kiểm soát. Cần có CSS ​​tùy chỉnh cho bố cục có chiều cao cố định

Trình bắt đầu chủ đề Manuel

(@jokermanu)

Cảm ơn bạn đã trả lời nhanh chóng của bạn
Bạn có thể cung cấp một số CSS để đạt được bố cục này không?

Tác giả plugin Virgildia

(@virgildia)

@jokermanu tôi cần một liên kết đến trang web của bạn để xem băng chuyền

Trình bắt đầu chủ đề Manuel

(@jokermanu)

Xin lỗi, đây là liên kết. Đó là một môi trường thử nghiệm

Cảm ơn rất nhiều trước

Tác giả plugin Virgildia

(@virgildia)

@jokermanu hãy thử thêm phần này vào CSS tùy chỉnh của bạn (ở cuối tất cả các biểu định kiểu)

.wp-block-cb-carousel .slick-track {
  display: flex;
}

.wp-block-cb-carousel .wp-block-cb-slide {
  height: auto;
}

.wp-block-cb-carousel .gb-container, .wp-block-cb-carousel .gb-inside-container {
  height: 100%;
}

.wp-block-cb-carousel .wp-block-image {
  position: relative;
  overflow: hidden;
}

.wp-block-cb-carousel .wp-block-image:before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.wp-block-cb-carousel .wp-block-image img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
}

Nó sẽ đặt tất cả các slide có cùng chiều cao (dựa trên slide cao nhất). Nó cũng đặt tất cả các hình ảnh ở cùng một chiều cao nhưng có thể gây ra một số cắt xén, vì vậy hãy đảm bảo bạn đang sử dụng kích thước hình ảnh phù hợp. Nếu bạn muốn thay đổi chiều cao của hình ảnh, chỉ cần điều chỉnh padding-bottom: 100%; trong .wp-block-cb-carousel .wp-block-image:before { .. }. Bạn có thể lên trên 100% nếu muốn hình ảnh cao hơn

Chỉ cần lưu ý, hai bộ chọn đầu tiên sẽ đặt tất cả các trang trình bày có cùng chiều cao

.wp-block-cb-carousel .slick-track {
  display: flex;
}

.wp-block-cb-carousel .wp-block-cb-slide {
  height: auto;
}

Đối với bất kỳ khối trượt bên trong nào, hãy sử dụng chiều cao 100% để mở rộng và tùy chỉnh CSS. Mỗi khối sẽ cần CSS khác nhau để mở rộng

CSS mà tôi đã cung cấp dựa trên các khối mà bạn hiện có trong các trang trình bày. Tất nhiên nếu bạn thay đổi các khối/html thì CSS có thể không hoạt động. Vì lý do này, nhà phát triển có sử dụng CSS tùy chỉnh hay không. nó sẽ khác nhau cho mỗi khối

• Câu trả lời này đã được sửa đổi 12 tháng trước bởi Virgildia .
• Câu trả lời này đã được sửa đổi 12 tháng trước bởi Virgildia .
• Câu trả lời này đã được sửa đổi 12 tháng trước bởi Virgildia .
• Câu trả lời này đã được sửa đổi 12 tháng trước bởi Virgildia .

Trình bắt đầu chủ đề Manuel

(@jokermanu)

Wow, thật là một sự hỗ trợ tuyệt vời và nhanh chóng
Xe tăng rất nhiều, làm việc tuyệt vời

Tác giả plugin Virgildia

(@virgildia)

@jokermanu tuyệt vời. Nếu bạn hài lòng với plugin, vui lòng để lại xếp hạng/đánh giá 🙂 Chúc tất cả những điều tốt đẹp nhất

Kích thước (hoặc chiều cao và chiều rộng) của một phần tử là động, vì chúng dao động để phù hợp với nội dung. Bằng cách nào đó có thể đặt kích thước cụ thể

blockquote{ width: 600px;}

Blockquote sẽ không chiếm toàn bộ chiều rộng có sẵn, nhưng sẽ duy trì chiều rộng 600px trong mọi tình huống

• nếu cửa sổ trình duyệt có chiều rộng nhỏ hơn 600px, nó sẽ hiển thị thanh cuộn ngang
• nếu cửa sổ trình duyệt rộng hơn 600px, thì blockquote sẽ giữ nguyên chiều rộng 600px và không chiếm toàn bộ dung lượng

Bởi vì chúng tôi chỉ đặt chiều rộng, blockquote vẫn linh hoạt về chiều cao. chiều cao trở thành kích thước thay đổi để phù hợp với nội dung của blockquote

Đặt cả chiều cao và chiều rộng

Bằng cách đặt kích thước của một phần tử, nó sẽ vẫn cố định bất kể độ dài của nội dung

Điều gì xảy ra nếu nội dung dài hơn phần tử có thể chứa?

Bởi vì chúng tôi ngăn phần tử tự động thay đổi kích thước của nó, nên có khả năng nội dung sẽ dài hơn phần tử chứa và sau đó sẽ tràn

Hành vi mặc định có thể gây ngạc nhiên. nội dung vẫn sẽ được hiển thị

blockquote{ background: yellow; height: 50px; width: 100px;}

The content er.. finds a way

nội dung er. tìm thấy một cách

tràn CSS

Thuộc tính CSS overflow cho phép chúng tôi quản lý trường hợp nội dung dài hơn vùng chứa của nó

Giá trị mặc định là visible. nội dung vẫn sẽ được hiển thị, bởi vì "Tại sao bạn muốn ngăn người dùng đọc nội dung nếu nội dung đó có trong mã?". Bạn có thể coi HTML là phổ biến đối với CSS

Bằng cách áp dụng overflow: hidden;, bạn chỉ cần cấm mọi nội dung tràn ngập được nhìn thấy

nội dung er. tìm thấy một cách

Nếu bạn muốn nội dung của mình tràn ngập nhưng vẫn muốn làm cho nội dung đó có thể truy cập được, bạn có thể quyết định hiển thị thanh cuộn bằng cách áp dụng overflow: scroll

nội dung er. tìm thấy một cách

Tùy chọn tốt hơn là sử dụng overflow: auto, vì thanh cuộn sẽ chỉ xuất hiện nếu nội dung bị tràn, nhưng sẽ vẫn bị ẩn cho đến lúc đó

nội dung er. tìm thấy một cách

Cẩn thận với kích thước cố định

Việc áp dụng các kích thước cụ thể thường được yêu cầu để một thiết kế trông bắt mắt nhưng có thể gây ra những hậu quả không lường trước được. Về vấn đề đó

Làm cách nào để tự động đặt chiều cao tối đa trong CSS?

Làm cách nào để đặt chiều cao động của div trong C#?

Làm cách nào để lấy chiều cao div một cách linh hoạt trong JavaScript?