如何使CSS图像容器适应不同的浏览器尺寸
[英]How to adapt CSS image container to different browser sizes
问题描述
我目前正在和一些朋友一起做一个网站项目，我们（在SO的帮助下）为主页制作了一个图像容器，但我们希望使其适应大多数屏幕尺寸（例如1920x1080、1366x768等） 。16：9我想，虽然平板电脑和智能手机还不多。
我们尝试使用这里提到的解决方案（ 使用CSS使用浏览器大小自动调整图像的大小 ），但它只是很奇怪地缩放了图像，而不是基于浏览器，只是在容器内缩小了图像。
我们也尝试过使用css获得屏幕分辨率的高度，但是我们也得到了一些奇怪的结果。
* { margin: 0; padding: 0; } body { background: #ccc; font-family: arial, verdana, tahoma; } /*Time to apply widths for accordian to work Width of image = 1840px total images = 3 so width of hovered image = 1840px width of un-hovered image = 40px - you can set this to anything so total container width = 1840 + 40*2 = 1920px; default width = 1920/3 = 640px; */ .accordian { width: 1920px; height: 1000px; overflow: hidden; /*Time for some styling*/ margin: 0px auto; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } /*A small hack to prevent flickering on some browsers*/ .accordian ul { width: 2000px; /*This will give ample space to the last item to move instead of falling down/flickering during hovers.*/ } .accordian li { position: relative; display: block; width: 640px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); /*Transitions to give animation effect*/ transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; /*If you hover on the images now you should be able to see the basic accordian*/ } /*Reduce with of un-hovered elements*/ .accordian ul:hover li { width: 40px; } /*Lets apply hover effects now*/ /*The LI hover style should override the UL hover style*/ .accordian ul li:hover { width: 1840px; } .accordian li img { display: block; } /*Image title styles*/ .image_title { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 1840px; } .image_title a { display: block; color: #fff; text-decoration: none; padding: 60px; font-size: 30px; }
<!doctype html5> <head> <title>CdS Home</title> <link rel='stylesheet' href='index.css' /> </head> <div class="accordian"> <ul> <li> <div class="image_title"> <a href="#">Event 1</a> </div> <a href="#"> <img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.wallpaperup.com%2Fuploads%2Fwallpapers%2F2015%2F01%2F30%2F606369%2F5510b472cf9126e305bb941e8ec8d9e8.jpg&f=1" /> </a> </li> <li> <div class="image_title"> <a href="#">Event 2</a> </div> <a href="#"> <img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.betaseries.com%2Fimages%2Ffonds%2Foriginal%2F9296_1415901083.jpg&f=1" /> </a> </li> <li> <div class="image_title"> <a href="#">Event 3</a> </div> <a href="#"> <img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.wallpaperup.com%2Fuploads%2Fwallpapers%2F2015%2F01%2F30%2F606369%2F5510b472cf9126e305bb941e8ec8d9e8.jpg&f=1" /> </a> </li> </ul> </div> And here is the CSS file /*Now the styles*/
这里是与代码运行一个的jsfiddle链接- https://jsfiddle.net/qvpy07vd/
我们应该如何修改代码，使其适应大多数常见的屏幕尺寸？ 我们是否必须为每个不同的屏幕执行不同的代码？
1 个解决方案
解决方案1
1 已采纳 2016-09-05 16:54:59
这是一个jsFiddle，但我建议您在单独的文件中尝试一下，以便您可以调整屏幕尺寸，它对我有用 ，祝您好运。
* { margin: 0; padding: 0; } .accordian ul{ width:auto;} .accordian { width: auto; overflow:hidden; height: 100%; margin: 0px auto; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } .accordian li { width: calc(95% / 3); position: relative; display: inline-block; height:100%; border-left: 1px solid #888; transition: all 0.5s ease 0s; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; see the basic accordian*/ } .accordian ul:hover li{ width:10%; } .accordian ul li:hover { width:calc( 95% - (10%*3)); background-color:rgba(0,0,0,0.5); } .accordian li img { display: block; width:auto; height:100%; } .image_title { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 1840px; } .image_title a { display: block; color: #fff; text-decoration: none; padding: 1%; font-size: 30px; }
<div class="accordian"> <ul> <li> <div class="image_title"> <a href="#">Event 1</a> </div> <a href="#"> <img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.wallpaperup.com%2Fuploads%2Fwallpapers%2F2015%2F01%2F30%2F606369%2F5510b472cf9126e305bb941e8ec8d9e8.jpg&f=1" /> </a> </li> <li> <div class="image_title"> <a href="#">Event 2</a> </div> <a href="#"> <img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.betaseries.com%2Fimages%2Ffonds%2Foriginal%2F9296_1415901083.jpg&f=1" /> </a> </li> <li> <div class="image_title"> <a href="#">Event 3</a> </div> <a href="#"> <img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.wallpaperup.com%2Fuploads%2Fwallpapers%2F2015%2F01%2F30%2F606369%2F5510b472cf9126e305bb941e8ec8d9e8.jpg&f=1" /> </a> </li> </ul> </div>
如何使我的 css 代码适应所有屏幕尺寸
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.