第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在輪播中顯示縱向和橫向圖像?

如何在輪播中顯示縱向和橫向圖像?

慕哥9229398 2022-10-08 17:44:49
我使用Owl Carousel在帶有 Javascript 和 jQuery 的輪播中顯示圖像。我有縱向和橫向圖像以及 CSS:.owl-carousel {  max-height: 80%;  max-width: 90%;  display:block;  margin: 0 auto;}.owl-carousel img {  max-height: 100%;  max-width: 100%;}橫向圖像遵守 100% 的寬度限制,并且完整的圖片出現(xiàn)在屏幕上;縱向圖像不遵守 100% 的高度限制,并且圖片出現(xiàn)在一兩個屏幕中,需要向下滾動。我希望調(diào)整縱向圖片的大小并完全顯示在橫向屏幕上,就像我希望橫向圖片完全顯示在縱向屏幕上一樣。我用 CSS 嘗試了 max-height 和 max-width的解決方案,但無濟于事。我通過僅包含橫向圖像(實時網(wǎng)站)暫時解決了該問題。如何在輪播中包含肖像圖像?
查看完整描述

2 回答

?
慕村9548890

TA貢獻1884條經(jīng)驗 獲得超4個贊

css Object-Fit屬性是你的朋友。這使得圖像的最長部分始終保持在容器范圍內(nèi)。

.owl-carousel img {

  display:block;

  margin: 0 auto;

  object-fit: contain;

}

在您的情況下,您可能還希望為圖像父.owl-carousel級提供實際尺寸,而不是僅設置最大尺寸并使用邊距。另外,我建議將圖像居中,而不是容器。


查看完整回答
反對 回復 2022-10-08
?
慕森卡

TA貢獻1806條經(jīng)驗 獲得超8個贊

你能添加object-fit:cover嗎?css 并添加固定高度。嘗試這個


.owl-carousel img{

object-fit: cover;

height: 700px;}


查看完整回答
反對 回復 2022-10-08
  • 2 回答
  • 0 關注
  • 153 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號