问题描述
我使用了悬停图像，但是当我在小屏幕上打开它时 {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>
悬停效果[输出我得到的
希望我能从某人那里得到解决方案
1楼
你没有使用媒体查询来适应不同的设备，因为你对所有设备都遵循相同的css你不应该指定图形的width和height ，而是尝试使用max-width和max-height
figure{
max-width: 400px; /* Corrected css */
max-height: 300px;
}
如果指定width在所有设备中的给定的width将被应用，除非你写media query应用不同width的不同devives。
2楼
请删除html中给标签的宽度和高度，并通过css指定它以保持图像的高度和宽度以适合父级。
3楼
它将帮助您尝试定义窗口的宽度和高度，例如
window.innerWidth;
window.innerHeight;
在java脚本中，用%设置你的图像大小宽度和高度。 如需更多帮助，请 。
4楼
试试这个，改变图形宽度：400px； 进宽：100%；
figure{
width:100%;
}
5楼
我已经使用媒体查询来计算宽度，现在您可以检查一下。 当您的设备宽度小于 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>