悬停图像大小问题
悬停图像大小问题
提问于 2019-03-04 14:40:54
我使用了悬停图像，但当我在小屏幕{400px，969px }上打开它时，这些图像溢出了，它不适合设备。我尝试使用x overflow，但它截断了图像。我需要这些图像来适应所有设备
*, *::before, *::after{
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hero2 container{
width: 100%;
max-width: 100%;
margin: auto;
display: block;
text-align: center;
position: absolute;
top: 0; left: 0;
}
figure{
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
display: inline-block;
vertical-align: top;
border: 5px solid #fff;
box-shadow: 0 0 5px #ddd;
margin: auto;
}
figcaption{
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
text-align: center;
font-weight: bold;
width: 100%;
height: 100%;
display: table;
}
figcaption div{
display: table-cell;
vertical-align: middle;
position: relative;
top: 20px;
opacity: 0;
color: #2c3e50;
text-transform: uppercase;
}
figcaption div:after{
position: absolute;
content: "";
left: 0; right: 0;
bottom: 40%;
text-align: center;
margin: auto;
width: 0%;
height: 2px;
background: #2c3e50;
}
figure img{
flex: auto;
float:left;
margin-right: 2px;
position: relative;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
width: 100%;
}
figure:hover figcaption{
background: rgba(255,255,255,0.3);
}
figcaption:hover div{
opacity: 1;
top: 0;
}
figcaption:hover div:after{
width: 50%;
}
figure:hover img{
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1000px;
list-style: none;
text-align: center;
}
/*font-face*/
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 100;
src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
.hero2 p {
font-size: 50;
}
.hero2 row content container{
width: 100%;
max-width: 900px;
margin: 0 auto;
position: relative;
padding: 0 0%;
flex: auto;
}<link href='https://fonts.googleapis.com/css?family=Raleway:400,800,300' rel='stylesheet' type='text/css'>
<link href="test1.css" rel="stylesheet"type="text/css">
<div class="hero2">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<body>
<div class="row content">
<p> Projects </p>
<div class="container">
<figure>
<img src="online%20shoping.jpg" alt="Thumb"width="300" height=" 300" />
<figcaption><div> Online shoping site <br> Technology: Java , SQL <br>
Web-based online shopping application . It maintains the details of customer payments, product receipts, products and also updating, deletion for the same. It also stores the details of invoices generated by customer and payments details. The primary features of the project are high accuracy, design flexibility and easy availability. </div></figcaption>
</figure>
<figure>
<img src="hexapod.jpg" alt="Thumb" width="300" height=" 300" />
<figcaption><div> Hexapod Robot <br>Technology: Embedded This project develops a Hexapod robot used to explore a remote location by sensing the parameters like light, temperature, distance etc, processes it and transmits the collected data to the control station using wireless means. Here Wi-Fi technology was used, real time video capturing facility. </div></figcaption>
</figure>
<figure>
<img src="per.JPG" alt="Thumb" width="300" height=" 300"/>
<figcaption><div> dipuraj.com- Personal website </div></figcaption>
</figure>
<figure>
<img src="autonom.jpg" alt="Thumb" width="300" height=" 300" />
<figcaption><div>Machine learning project Technology: JAVA, SQL <br>
Getting the true data and after making real time examples it will be used to teach the machine , how to react with situations occurring around it. For getting the perfect output we analysed it through several stages after the development. </div></figcaption>
</figure>
</div></div>
</body>
</div>
screen shoot悬停效果[输出我得到的what I am expecting in all screen (small mobile device below 400 res)
希望我能从某人那里得到解决方案
Stack Overflow用户
发布于 2019-03-04 14:54:34
它将帮助您尝试定义窗口的宽度和高度，如
window.innerWidth;
window.innerHeight;在java脚本中，使用%设置图像大小、宽度和高度。有关更多帮助，请访问W3schools。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54977829
复制相关文章
相似问题
腾讯云开发者
