我使用了悬停图片，但是当我在小屏幕上打开悬停图片{400px，969px}时，这些图片溢出了，不适合设备使用。我尝试了x溢出，但它会切断图像。我需要那些图像适合所有设备，
*, *::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 mobbile device below 400 res)
希望我能从某人那里得到解决方案
答案 0 :(得分：0)
您尚未使用媒体查询来适合其他设备，因为所有设备都遵循相同的css，因此不应为图形指定width和height，而应尝试使用max-width和max-height
figure{
max-width: 400px; /* Corrected css */
max-height: 300px;
}
如果您在所有设备中指定width，则将应用给定的width，除非您编写了media query为不同的神职人员应用不同的width。
答案 1 :(得分：0)
请删除html内标记所赋予的宽度和高度，并通过css对其进行指定，以保持图像的高度和宽度适合父项。
答案 2 :(得分：0)
它将帮助您尝试定义窗口的宽度和高度，例如
window.innerWidth;
window.innerHeight;
在Java脚本中，并使用％设置图像大小的宽度和高度。 如需更多帮助，W3schools。
答案 3 :(得分：0)
尝试一下， 更改图形宽度：400px；宽度：100％;
figure{
width:100%;
}
答案 4 :(得分：0)
我已经使用媒体查询来计算宽度，现在可以检查了。当设备宽度小于600时，对于设备宽度大于600的您将获得完整的图像视图，您将看到图像面板的两个部分。
*, *::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: calc(50% - 5px);
height: 300px;
overflow: hidden;
position: relative;
display: inline-block;
vertical-align: top;
border: 5px solid #fff;
box-shadow: 0 0 5px #ddd;
margin: auto;
}
@media only screen and (max-width: 600px) {
figure{
width: calc(100% - 5px);
height: 300px;
}
}
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" />
<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" />
<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" />
<figcaption><div> dipuraj.com- Personal website </div></figcaption>
</figure>
<figure>
<img src="autonom.jpg" alt="Thumb" />
<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>