经常有这样一个场景,需要让图片自适应容器的大小。
我们马上就能想到,把width、height 设置为100%啊。来看一哈效果。
<div class='div1'>
<img src="./peiqi.png" alt="">
</div>
.div1 {
width:500px;
height:400px;
border:1px solid black;
}
.div1 img {
/*
width: 100%;
height:100%;
*/
}
这是正常的佩琪(如果图片比容器大的话,图片会超出容器)
.div1 {
width:500px;
height:400px;
border:1px solid black;
}
.div1 img {
width: 100%;
height:100%;
}
这是100%的佩琪
额,好像刚过完年。
虽然符合了自适应的要求,但是如图所见图片失真了。这种图片比容器小的情况强行将图片自适应的话图片就失真。如果说是单个图片(logo、占位图、等)按设计稿开发就可以了。但经常会遇到接口获取的不规则图片的情况,一般这种时候会将小于容器的话将其水平、垂直居中。
整理一下任务:
<div class='div1'>
<img src="./peiqi.png" alt="">
</div>
<div class='div1'>
<img src="./peiqi2.png" alt="">
</div>
<div class='div1'>
<img src="./peiqi4.jpeg" alt="">
</div>
.div1 {
width:500px;
height:400px;
border:1px solid black;
display: table-cell;
vertical-align: middle;
}
.div1 img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。
max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.
这种效果就舒服多了
.div {
background-size: contain;
}
background-size: contain; 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。利用css的 background-size: contain; 属性就能进一步优化图片的宽高都小于容器的情况了。
上代码:
div {
height: 400px;
width: 500px;
border: 1px solid black;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.div1 {
background-image: url(./peiqi1.png);
}
.div2 {
background-image: url(./peiqi2.png);
}
.div3 {
background-image: url(./peiqi4.jpeg);
}
<div class='div1'></div>
<div class='div2'></div>
<div class='div3'></div>
当然最后还得看需求,产品是咋要求的。
首先来理解一下简单的一个请求发送到响应的过程。客户端,通常是浏览器或者一些应用发送请求到你的服务器地址,比如访问你的Url或者其他的东西。而我们的服务器通常要分为两个部分,一部分是服务器硬件,有了硬件之后还有有硬件上对应运行的软件。
web容器可能决定一个Servlet是否从servic中移除(例如,当一个容器想要回收内存资源时或者被关闭时)。在上面的场景中,容器会调用Servlet接口的destroy方法。在方法中,可以释放servlet使用的任何资源
好的设计会提高程序的可复用性和可维护性,也间接的提高了开发人员的生产力。今天,我们就来说一下在很多框架中都使用的依赖注入。要搞清楚什么是依赖注入如何依赖注入,首先我们要明确一些概念。
不管是对元素的哪种操作,都会造成它的属性、子孙节点、文本节点发生了变化,如果能能监听得到这种变化,这时只需比较容器宽高变化,即可实现对容器宽高的监听,而无需关系它外部行为。DOM3 Events 规范为我们提供了 MutationObserver 接口监视对 DOM 树所做更改的能力
css可以通过word-break与white-space这两个属性来设置自动换行。word-wrap属性允许长单词或URL地址换行到下一行。white-space属性可以设置文本换行方式。
服务端绝大部分程序都是 Linux 程序。这些程序一般由文件系统、一些可执行文件,一些共享的库文件(这些库文件与一些系统库例如 systemd 或者 nsswitch 做交互)。Docker 让使用 Linux 容器变得更容易
CSS容器查询终于来了! 它们目前在谷歌浏览器(105)中得到了支持,很快就会在Safari 16中得到支持。这对前端来说容器查询与媒体查询一样重要。在这节课中,我们介绍一下容器查询是如何工作的,如何使用它们
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!