css手机端图片截取 object-fit: cover；

最新推荐文章于 2023-12-21 15:33:32 发布

linlinlove2

最新推荐文章于 2023-12-21 15:33:32 发布

阅读量1k

点赞数 23

文章标签： css 前端

本文链接：https://blog.csdn.net/withkai44/article/details/134954274

版权

电脑端案例效果：
在这里插入图片描述
手机端案例效果：

<!DOCTYPE html>  
<html>  
<head>  

</head>  
<body>  
<a href="" class="container">  

  <div class="background-image1">  
    <img src="11.jpg" alt="背景图">  
  </div> 
<div class="overlay222"></div> 
<div class="text textpageboll">
<div class="fading-images-overlay__title aatitle--1">Thank you for being a part of our journey.  We look forward to co-creating a brighter sexual health future with you.</div>
<div class="fading-images-overlay__title aatitle--2">DISCOVER MORE ABOUT LOVETOY</div>
</div>  

</a> 

</body>

<style>  
body {  
  margin: 0;  
  padding: 0;  
  font-family: Arial, sans-serif;  
}  
  
.container {  
  position: relative;  
  width: 100%;  
  height: 422.5px;
  display: block;
}  
@media only screen and (min-width: 590px){
.container  {
height: 650px;
}
.aatitle--2 {
    width: 80%;
}
}

.background-image1 img {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  object-fit: cover;  
}  
  
.textpageboll {  
  position: absolute;  
  color: #fff;  
  font-size: 20px;  
  bottom: 6%;  z-index: 9999;
  left: -1px; right:-1px; 
  /*transform: translate(-50%, -50%);  */
}  
  
.overlay222 {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background: rgba(0, 0, 0, 0.5); /* 黑色半透明背景 */  
  z-index: 1;  
}  
  .aatitle--1 {
    font-weight: 600;
    color: #fff;
    font-size: 1.1em;
    text-align: center;
}
.aatitle--2 {width: 28%;
    font-size: 1.1em;
    display: block;
    border: 1px solid #ffffff;
    text-align: center;
    margin-top: 15px;
    margin-right: auto;
    margin-left: auto;
    padding: 10px;
}
.aatitle--2 {
  text-align: center;
    font-weight: 600;
    color: #fff;
}
.aatitle--2:hover {
    background-color: #c11078;
}
/* 响应式布局 */  
@media (max-width: 600px) {  
  .text {  
    font-size: 16px; /* 根据需要调整字体大小 */  
  }  
}  
@media (max-width: 400px) {  
  .text {  
    font-size: 14px; /* 根据需要调整字体大小 */  
  }  
}  
</style>