Проблема с размером изображения при наведении
Надеюсь, вы уже работали над этим, но я просто пишу, чтобы сказать, что столкнулся с одной и той же проблемой: WebKit, по крайней мере, на iOS 4.1, не будет анимировать переход, если он был определен в элементе, display: none; », точно так же, как упомянутый выше Николас.
Если ваша проблема в том, чтобы не показывать этот элемент, это, как и в моем случае, то я предлагаю другое решение, чем установить высоту в 0. В вашем теле обратный вызов события onLoad, сохраните элемент в переменной и удалите его из DOM. Затем повторно вставьте его, когда наступит время, чтобы показать его.
4 ответа
Я использовал медиа-запрос с вычислением по ширине, теперь вы можете проверить. когда ширина вашего устройства меньше 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> Вы не использовали медиазапрос для размещения на другом устройстве, поскольку вы следовали одному и тому же пункту css для всех устройств, вам не следует указывать width и height для рисунка, вместо этого попробуйте использовать max-width и [ 115]
figure{
max-width: 400px; /* Corrected css */
max-height: 300px;
}
Если вы укажете width на всех устройствах, данный width будет применяться, если вы не написали media query, чтобы применить разные width для разных девивов.
Это поможет вам попытаться определить ширину и высоту окна, например
window.innerWidth;
window.innerHeight;
В java-скрипте и установить ширину и высоту вашего изображения с помощью%. Для получения дополнительной помощи W3schools .
Попробуйте, измените ширину фигуры: 400px; в ширину: 100%;
figure{
width:100%;
}