我使用了悬停图像，但是当我在小屏幕 {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)
希望我能从某人那里得到解决方案
最佳答案
您没有使用媒体查询来适应不同的设备，因为您对所有设备都遵循相同的 css，所以您不应该指定 width 和 height 改为尝试使用 max-width 和 max-height
figure{
max-width: 400px; /* Corrected css */
max-height: 300px;
}
如果您在所有设备中指定 width，则给定的 width 将被应用，除非您编写了 media query 来应用不同的 width 针对不同的设备。
关于javascript - 悬停图像大小问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54977829/