返回新闻列表

swiper里面如果又视频和图片,css将视频100%铺满,不撑高解决办法

发布日期: 2024-08-20 | 来源: 智软设计工作室


swiper里面如果又视频和图片,由于视频客户比例和图片不对。会导致高度不一样。会导致swiper高度撑高,其他比例少的就会又空白,

由于考虑图片自适应。没有采用背景,背景的话。有些是显示不完全,只能像办法css裁剪掉视频,


里面视频样式用这个即可。

      .swiper-containervd .swiper-slide video {   

     position: absolute; /* 绝对定位视频 */

top: 0;

left: 0;

width: 100%; /* 视频宽度 100% */

height: 100%; /* 视频高度 100% */

object-fit: cover; /* 视频填满容器并裁剪多余部分 */

 }


整理的代码在这里。https://www.002t.cn/jishuwenzhang/130.html 

推荐技术资料

好用的独立响应式css

2024-03-10

好用的独立响应式css,网站制作的时候很方便,@media响应式也也好了。在配合独立的格栅系统 ,就好用了。不用加载其他css框架梁https://www.002t.cn/jishuwenzhang/108.html 如果要用rem布局。在加载一个js响应式设置html字体大小。 https://www.002t.cn/jishuwenzhang/109.html/*重置标签*/html{-ms-text-s

阅读更多

PBOOTCMS怎么放子目录运行,放入后怎么伪静态了?不然出错,

2023-09-02

PBOOTCMS 怎么放子目录运行,放入后怎么伪静态了?下面我们来看看怎么解决。子目录运行很简单,复制一个完整的源代码进入即可,默认不进行伪静态是没啥问题,但是一旦伪静态了。点击就会找不到页面。下面就要更改以下伪静态规则。如下面nginx的规则,nginx伪静态配置如下:location /en/ {if (!-e $request_filename){rewri

阅读更多

pbootcms的pboot:if判断字段内容是否为空,报错,

2023-05-29

解决办法:程序运行异常: Modulo by zero,位置: /data/home/qxu1539590078/htdocs/core/function/helperphp,第838行pbootcms 判断字段内容是否为空,会出现以上问题,导致的原有就是内容里又特殊字符,那我们怎么解决了。可用用如下方法,截取部分来做判断:{pboot:if('{content:ext_gzcanr2 len=8}'!=''

阅读更多

最新7.0video.js响应式设置,配置和设置语言为繁体

2021-12-14

最新7.0video.js响应式设置,配置和设置语言为繁体,先导入相应js和css <link href="/videojs/video-js.min.css" rel="stylesheet"> <script src="/videojs/video.min.js"></script> <script src="/videojs/lang/zh-TW.js"&g

阅读更多

pboot:list 标签 list:title 让他不带...

2021-10-18

设置:more=''参数即可{pboot:list scode=1 num=2 order=date} <li><a href="[list:link]">[list:title lencn=17 more='']</a></li> {/pboot:list}

阅读更多

html中解决防盗链图片问题,让图片正常加载显示的方法

2023-03-15

解决方案使用Referer Meta标签控制referer,在H5 的 header加入meta<metaname="referrer"content="never">

阅读更多

pboot:tags标签 显示当前页面的 tags

2021-10-18

直接写id参数当前页的{content:id}就行了。{pboot:tags id={content:id}}&nbsp;<a href='[tags:link]' class='tagc[field:highlight /]'>[tags:text]</a>{/pboot:tags}

阅读更多

网站自动翻译成英文,谷歌翻译api,怎样能打开网站默认自动翻译

2021-11-10

测试可用,就是要加载下js网站自动翻译成英文谷歌翻译api,怎样能打开网站默认自动翻译,设置Cookie就行了。也可以做多语言翻译。去除隐藏css选择项就行了。<style><!--隐藏长条-->.goog-te-banner-frame.skiptranslate { display: none !important;} body { top: 0px !important; }.goog-t

阅读更多

Swiper轮播图视频加图片混合,完美解决方法,

2024-08-19

Swiper轮播图视频加图片混合,完美解决方法,还加入了图片浮动文字动画。下面是代码。测试是比较完美。视频播放玩了。在自动切换到下一个幻灯,<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8">

阅读更多