Skip to content

Z
ZhongWeiXin
Commit 5a0ff56a by 邓丽
Options

imgauto

parent 849835ef
Showing with 295 additions and 138 deletions
dist/css/sprite.css
...@@ -18,61 +18,49 @@ To change `display` (e.g. `display: inline-block;`), we suggest using a common C ...@@ -18,61 +18,49 @@ To change `display` (e.g. `display: inline-block;`), we suggest using a common C
*/ */
.icon-closeIco { .icon-closeIco {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -143px 0px; background-position: 0px 0px;
width: 52px; width: 52px;
height: 52px; height: 52px;
} }
.icon-closeIco2 { .icon-closeIco2 {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -195px -28px; background-position: -97px -28px;
width: 26px; width: 26px;
height: 26px; height: 26px;
} }
.icon-closeIco3 { .icon-closeIco3 {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -143px -52px; background-position: -52px 0px;
width: 45px; width: 45px;
height: 45px; height: 45px;
} }
.icon-closeSmall { .icon-closeSmall {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -195px -54px; background-position: -97px -54px;
width: 19px; width: 19px;
height: 20px; height: 20px;
} }
.icon-facebook { .icon-facebook {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -195px 0px; background-position: -97px 0px;
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
.icon-instagram { .icon-instagram {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -143px -97px; background-position: 0px -52px;
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
.icon-leftIcon {
background-image: url(sprite.png);
background-position: -72px 0px;
width: 71px;
height: 141px;
}
.icon-pinterest { .icon-pinterest {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: 0px -142px; background-position: -32px -52px;
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
.icon-rightIcon {
background-image: url(sprite.png);
background-position: 0px 0px;
width: 72px;
height: 142px;
}
.icon-tuite { .icon-tuite {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -32px -142px; background-position: -64px -52px;
width: 32px; width: 32px;
height: 26px; height: 26px;
} }
dist/css/sprite.png
dist/css/sprite.png

8.18 KB | W: | H:

dist/css/sprite.png

4.97 KB | W: | H:

dist/css/sprite.png
dist/css/sprite.png
dist/css/sprite.png
dist/css/sprite.png
  • 2-up
  • Swipe
  • Onion skin
dist/css/style.css
...@@ -20,61 +20,49 @@ To change `display` (e.g. `display: inline-block;`), we suggest using a common C ...@@ -20,61 +20,49 @@ To change `display` (e.g. `display: inline-block;`), we suggest using a common C
*/ */
.icon-closeIco { .icon-closeIco {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -143px 0px; background-position: 0px 0px;
width: 52px; width: 52px;
height: 52px; height: 52px;
} }
.icon-closeIco2 { .icon-closeIco2 {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -195px -28px; background-position: -97px -28px;
width: 26px; width: 26px;
height: 26px; height: 26px;
} }
.icon-closeIco3 { .icon-closeIco3 {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -143px -52px; background-position: -52px 0px;
width: 45px; width: 45px;
height: 45px; height: 45px;
} }
.icon-closeSmall { .icon-closeSmall {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -195px -54px; background-position: -97px -54px;
width: 19px; width: 19px;
height: 20px; height: 20px;
} }
.icon-facebook { .icon-facebook {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -195px 0px; background-position: -97px 0px;
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
.icon-instagram { .icon-instagram {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -143px -97px; background-position: 0px -52px;
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
.icon-leftIcon {
background-image: url(sprite.png);
background-position: -72px 0px;
width: 71px;
height: 141px;
}
.icon-pinterest { .icon-pinterest {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: 0px -142px; background-position: -32px -52px;
width: 33px; width: 32px;
height: 33px; height: 32px;
}
.icon-rightIcon {
background-image: url(sprite.png);
background-position: 0px 0px;
width: 72px;
height: 142px;
} }
.icon-tuite { .icon-tuite {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -32px -142px; background-position: -64px -52px;
width: 32px; width: 32px;
height: 26px; height: 26px;
} }
...@@ -475,7 +463,7 @@ body { ...@@ -475,7 +463,7 @@ body {
height: 700px; height: 700px;
width: 200px; width: 200px;
position: absolute; position: absolute;
top: 0px; top: 150px;
z-index: 10; z-index: 10;
-webkit-transition: none; -webkit-transition: none;
transition: none; transition: none;
...@@ -704,9 +692,9 @@ a.cd-read-more:hover { ...@@ -704,9 +692,9 @@ a.cd-read-more:hover {
color: #8a8a8a; color: #8a8a8a;
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.marginTop { /* .marginTop{
margin-top: 160px; margin-top:160px;
} }*/
.am-with-topbar-fixed-top { .am-with-topbar-fixed-top {
padding-top: 200px; padding-top: 200px;
} }
...@@ -1037,7 +1025,7 @@ a.cd-read-more:hover { ...@@ -1037,7 +1025,7 @@ a.cd-read-more:hover {
.imgIntro { .imgIntro {
color: #fff; color: #fff;
position: absolute; position: absolute;
top: 0px; top: 100px;
left: 3%; left: 3%;
z-index: 10; z-index: 10;
width: 20%; width: 20%;
...@@ -1305,11 +1293,17 @@ a.cd-read-more:hover { ...@@ -1305,11 +1293,17 @@ a.cd-read-more:hover {
display: block; display: block;
margin: 0px auto; margin: 0px auto;
} }
.am-slider .portfolioSiles img.crossImg {
max-width: 100%;
}
.am-slider .portfolioSiles img.verticalImg {
max-height: 100%;
}
} }
@media (min-width: 1150px) and (max-width: 1530px) { @media (min-width: 1150px) and (max-width: 1530px) {
.marginTop { /* .marginTop{
margin-top: 110px; margin-top:110px;
} }*/
.am-with-topbar-fixed-top { .am-with-topbar-fixed-top {
padding-top: 150px; padding-top: 150px;
} }
...@@ -1383,9 +1377,9 @@ a.cd-read-more:hover { ...@@ -1383,9 +1377,9 @@ a.cd-read-more:hover {
} }
} }
@media (min-width: 640px) and (max-width: 1150px) { @media (min-width: 640px) and (max-width: 1150px) {
.marginTop { /* .marginTop{
margin-top: 100px; margin-top:100px;
} }*/
.am-with-topbar-fixed-top { .am-with-topbar-fixed-top {
padding-top: 100px; padding-top: 100px;
} }
...@@ -1547,11 +1541,11 @@ a.cd-read-more:hover { ...@@ -1547,11 +1541,11 @@ a.cd-read-more:hover {
} }
@media (min-width: 640px) and (max-width: 850px) { @media (min-width: 640px) and (max-width: 850px) {
.am-with-topbar-fixed-top { .am-with-topbar-fixed-top {
/* .marginTop{
margin-top:100px;
}*/
padding-top: 100px; padding-top: 100px;
} }
.am-with-topbar-fixed-top .marginTop {
margin-top: 100px;
}
.am-topbar-brand { .am-topbar-brand {
width: 26%; width: 26%;
text-align: center; text-align: center;
...@@ -1883,8 +1877,8 @@ a.cd-read-more:hover { ...@@ -1883,8 +1877,8 @@ a.cd-read-more:hover {
} }
/*index页面*/ /*index页面*/
.mobileTop { .mobileTop {
margin-top: 46%; /* margin-top: 46%;*/
max-height: 300px; /* max-height: 300px;*/
overflow: hidden; overflow: hidden;
} }
.mobileTop #entry { .mobileTop #entry {
...@@ -1897,7 +1891,7 @@ a.cd-read-more:hover { ...@@ -1897,7 +1891,7 @@ a.cd-read-more:hover {
z-index: 10; z-index: 10;
width: 100%; width: 100%;
text-align: center; text-align: center;
top: 100px; top: 250px;
} }
.mobileTop .title h2 { .mobileTop .title h2 {
font-size: 18px; font-size: 18px;
...@@ -2167,11 +2161,6 @@ a.cd-read-more:hover { ...@@ -2167,11 +2161,6 @@ a.cd-read-more:hover {
display: none; display: none;
} }
} }
@media (min-width: 300px) and (max-width: 640px) {
.mobileTop .title {
top: 80px;
}
}
.am-dimmer { .am-dimmer {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
dist/html/index.html
...@@ -57,30 +57,30 @@ ...@@ -57,30 +57,30 @@
</div> </div>
<ul class="am-slides indexSlide" id="portfolioDel"> <ul class="am-slides indexSlide" id="portfolioDel">
<li> <li>
<div class=""> <div>
<img src="../images/testImg1.png" /> <img src="../images/testImg1.png" />
</div> </div>
</li> </li>
<li> <li>
<div class=""> <div>
<img src="../images/testImg4.png" /> <img src="../images/testImg4.png" />
</div> </div>
</li> </li>
<li> <li>
<div class=""> <div>
<img src="../images/testImg2.png" /> <img src="../images/testImg2.png" />
</div> </div>
</li> </li>
<!-- <li> <li>
<div> <div>
<img src="../images/testImg31.png" /> <img src="../images/testImg3.png" />
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<img src="../images/testImg41.png" /> <img src="../images/testImg4.png" />
</div> </div>
</li>--> </li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -103,5 +103,31 @@ ...@@ -103,5 +103,31 @@
controlNav: false // Boolean: 是否创建控制点 controlNav: false // Boolean: 是否创建控制点
}); });
</script> </script>
<script>
var _w = parseInt($(window).width());//获取浏览器的宽度
var _h = parseInt($(window).height());//获取浏览器的宽度
$(function(){
if(_w<=640) {
$("#portfolioDel").find("img").each(function (i) {
var img = $(this);
var realWidth;
var realHeight;
var marginT=parseInt((_h -$(".title").height())/2);
$(".title").css("top",marginT);
$("<img/>").attr("src", $(img).attr("src")).load(function () {
realWidth = this.width;
realHeight = this.height;
var bi=(realHeight/realWidth).toFixed(2);
var Top = parseInt((_h - parseInt(_w*bi))/2);
$(img).css({
"margin-top":Top,
"width":'100%',
"height":"auto"
});
});
});
}
})
</script>
</body> </body>
</html> </html>
\ No newline at end of file
dist/html/portfolioDetail.html
...@@ -66,12 +66,37 @@ ...@@ -66,12 +66,37 @@
<ul class="am-slides portfolioSiles" id="portfolioDel"> <ul class="am-slides portfolioSiles" id="portfolioDel">
<li> <li>
<div> <div>
<img src="../images/testImg4.png" /> <img src="../images/testImg4.png" />
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<img src="../images/testImg1.png" /> <img src="../images/testImg1.png" />
</div>
</li>
<li>
<div>
<img src="../images/testImg6.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg8.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg7.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg10.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg11.jpg" />
</div> </div>
</li> </li>
</ul> </ul>
...@@ -91,5 +116,57 @@ ...@@ -91,5 +116,57 @@
smoothHeight: true smoothHeight: true
}); });
</script> </script>
<script>
function pictureAuto(){
var _w = parseInt($(window).width());//获取浏览器的宽度
var _h = parseInt($(window).height());//获取浏览器的宽度
if(_w>640){
$("#portfolioDel img").each(function (i) {
var img = $(this);
var realWidth;
var realHeight;
$("<img/>").attr("src", $(img).attr("src")).load(function () {
realWidth = this.width;
realHeight = this.height;
var bi=(realHeight/realWidth).toFixed(2);
var mH=parseInt(_w*bi);
var Top=parseInt((_h-realHeight)/2);
console.log(_w);
//如果真实的宽度大于浏览器的宽度就按照100%显示
if (realWidth >= _w && realWidth >= realHeight) {
if(mH>_h){
$(img).css({
"max-height": _h,
"width": "auto"
});
}else{
$(img).css({
"max-width": _w,
"height":"auto"
});
}
}else if(realHeight >= _h && realWidth < realHeight ){//如果小于浏览器的宽度按照原尺寸显示
$(img).css({
"max-height": _h,
"width": "auto"
});
}else{
$(img).css({
"width": realWidth,
"height":realHeight,
'margin-top':Top
});
}
});
});
}
}
$(function(){
pictureAuto();
})
$(window).resize(function() {
pictureAuto();
})
</script>
</body> </body>
</html> </html>
\ No newline at end of file
dist/images/testImg10.jpg 0 → 100644
This image diff could not be displayed because it is too large. You can view the blob instead.
src/images/testImg10.jpg 0 → 100644
This image diff could not be displayed because it is too large. You can view the blob instead.
src/less/common/sprite.css
...@@ -18,61 +18,49 @@ To change `display` (e.g. `display: inline-block;`), we suggest using a common C ...@@ -18,61 +18,49 @@ To change `display` (e.g. `display: inline-block;`), we suggest using a common C
*/ */
.icon-closeIco { .icon-closeIco {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -143px 0px; background-position: 0px 0px;
width: 52px; width: 52px;
height: 52px; height: 52px;
} }
.icon-closeIco2 { .icon-closeIco2 {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -195px -28px; background-position: -97px -28px;
width: 26px; width: 26px;
height: 26px; height: 26px;
} }
.icon-closeIco3 { .icon-closeIco3 {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -143px -52px; background-position: -52px 0px;
width: 45px; width: 45px;
height: 45px; height: 45px;
} }
.icon-closeSmall { .icon-closeSmall {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -195px -54px; background-position: -97px -54px;
width: 19px; width: 19px;
height: 20px; height: 20px;
} }
.icon-facebook { .icon-facebook {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -195px 0px; background-position: -97px 0px;
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
.icon-instagram { .icon-instagram {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -143px -97px; background-position: 0px -52px;
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
.icon-leftIcon {
background-image: url(sprite.png);
background-position: -72px 0px;
width: 71px;
height: 141px;
}
.icon-pinterest { .icon-pinterest {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: 0px -142px; background-position: -32px -52px;
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
.icon-rightIcon {
background-image: url(sprite.png);
background-position: 0px 0px;
width: 72px;
height: 142px;
}
.icon-tuite { .icon-tuite {
background-image: url(sprite.png); background-image: url(sprite.png);
background-position: -32px -142px; background-position: -64px -52px;
width: 32px; width: 32px;
height: 26px; height: 26px;
} }
src/less/style.less
...@@ -105,7 +105,7 @@ body{ ...@@ -105,7 +105,7 @@ body{
height: 700px; height: 700px;
width: 200px; width: 200px;
position: absolute; position: absolute;
top: 0px; top:150px;
z-index: 10; z-index: 10;
-webkit-transition: none; -webkit-transition: none;
transition: none; transition: none;
...@@ -339,9 +339,9 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; } ...@@ -339,9 +339,9 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
} }
@media only screen and (min-width: 640px){ @media only screen and (min-width: 640px){
.marginTop{ /* .marginTop{
margin-top:160px; margin-top:160px;
} }*/
.am-with-topbar-fixed-top { .am-with-topbar-fixed-top {
padding-top: 200px; padding-top: 200px;
} }
...@@ -680,7 +680,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; } ...@@ -680,7 +680,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
.imgIntro{ .imgIntro{
color: #fff; color: #fff;
position: absolute; position: absolute;
top:0px; top:100px;
left: 3%; left: 3%;
z-index: 10; z-index: 10;
width: 20%; width: 20%;
...@@ -705,10 +705,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; } ...@@ -705,10 +705,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
overflow: auto; overflow: auto;
} }
} }
/* #entry{
width:100%;
position: absolute;
}*/
.bgImg{ .bgImg{
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -727,7 +723,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; } ...@@ -727,7 +723,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
top: 43%; top: 43%;
width: 100%; width: 100%;
text-align: center; text-align: center;
/* background: rgba(0,0,0,0.2);*/
h2{ h2{
font-size: 2.8rem; font-size: 2.8rem;
line-height: 30px; line-height: 30px;
...@@ -736,9 +731,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; } ...@@ -736,9 +731,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
letter-spacing: 6px; letter-spacing: 6px;
word-spacing: 6px; word-spacing: 6px;
font-weight: 400; font-weight: 400;
width:100%; width:100%;/;
/* position: absolute;
top: 43%*/;
} }
p{ p{
font-size: 2.0rem; font-size: 2.0rem;
...@@ -746,8 +739,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; } ...@@ -746,8 +739,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
word-spacing: 6px; word-spacing: 6px;
letter-spacing: 2px; letter-spacing: 2px;
width:100%; width:100%;
/* position: absolute;
top: 50%;*/
a{ a{
color: #c9c9c9; color: #c9c9c9;
} }
...@@ -951,11 +942,14 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; } ...@@ -951,11 +942,14 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
display: block; display: block;
margin: 0px auto; margin: 0px auto;
} }
.am-slider .portfolioSiles img.crossImg{
max-width:100%;
}
.am-slider .portfolioSiles img.verticalImg{
max-height:100%;
}
} }
@media (min-width: 1150px) and (max-width: 1530px){ @media (min-width: 1150px) and (max-width: 1530px){
.marginTop{
margin-top:110px;
}
.am-with-topbar-fixed-top { .am-with-topbar-fixed-top {
padding-top: 150px; padding-top: 150px;
} }
...@@ -1036,9 +1030,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; } ...@@ -1036,9 +1030,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
} }
@media (min-width: 640px) and (max-width:1150px){ @media (min-width: 640px) and (max-width:1150px){
.marginTop{
margin-top:100px;
}
.am-with-topbar-fixed-top { .am-with-topbar-fixed-top {
padding-top: 100px; padding-top: 100px;
} }
...@@ -1208,9 +1199,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; } ...@@ -1208,9 +1199,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
} }
@media (min-width: 640px) and (max-width:850px){ @media (min-width: 640px) and (max-width:850px){
.am-with-topbar-fixed-top { .am-with-topbar-fixed-top {
.marginTop{
margin-top:100px;
}
padding-top: 100px; padding-top: 100px;
} }
.am-topbar-brand { .am-topbar-brand {
...@@ -1262,7 +1250,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; } ...@@ -1262,7 +1250,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
color: #eee; color: #eee;
line-height: 20px; line-height: 20px;
word-spacing: 1px; word-spacing: 1px;
/* height: 500px;*/
overflow: auto; overflow: auto;
} }
} }
...@@ -1553,8 +1540,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; } ...@@ -1553,8 +1540,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
} }
/*index页面*/ /*index页面*/
.mobileTop{ .mobileTop{
margin-top: 46%;
max-height: 300px;
overflow: hidden; overflow: hidden;
#entry{ #entry{
width:100%; width:100%;
...@@ -1566,7 +1551,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; } ...@@ -1566,7 +1551,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
z-index: 10; z-index: 10;
width: 100%; width: 100%;
text-align: center; text-align: center;
top:100px; top:250px;
h2{ h2{
font-size: 18px; font-size: 18px;
word-spacing: 2px; word-spacing: 2px;
...@@ -1841,9 +1826,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; } ...@@ -1841,9 +1826,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
} }
} }
@media (min-width: 300px) and (max-width: 640px){ @media (min-width: 300px) and (max-width: 640px){
.mobileTop .title{
top: 80px;
}
} }
.am-dimmer { .am-dimmer {
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
......
src/pages/index.ejs
...@@ -23,30 +23,30 @@ ...@@ -23,30 +23,30 @@
</div> </div>
<ul class="am-slides indexSlide" id="portfolioDel"> <ul class="am-slides indexSlide" id="portfolioDel">
<li> <li>
<div class=""> <div>
<img src="../images/testImg1.png" /> <img src="../images/testImg1.png" />
</div> </div>
</li> </li>
<li> <li>
<div class=""> <div>
<img src="../images/testImg4.png" /> <img src="../images/testImg4.png" />
</div> </div>
</li> </li>
<li> <li>
<div class=""> <div>
<img src="../images/testImg2.png" /> <img src="../images/testImg2.png" />
</div> </div>
</li> </li>
<!-- <li> <li>
<div> <div>
<img src="../images/testImg31.png" /> <img src="../images/testImg3.png" />
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<img src="../images/testImg41.png" /> <img src="../images/testImg4.png" />
</div> </div>
</li>--> </li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -63,5 +63,31 @@ ...@@ -63,5 +63,31 @@
controlNav: false // Boolean: 是否创建控制点 controlNav: false // Boolean: 是否创建控制点
}); });
</script> </script>
<script>
var _w = parseInt($(window).width());//获取浏览器的宽度
var _h = parseInt($(window).height());//获取浏览器的宽度
$(function(){
if(_w<=640) {
$("#portfolioDel").find("img").each(function (i) {
var img = $(this);
var realWidth;
var realHeight;
var marginT=parseInt((_h -$(".title").height())/2);
$(".title").css("top",marginT);
$("<img/>").attr("src", $(img).attr("src")).load(function () {
realWidth = this.width;
realHeight = this.height;
var bi=(realHeight/realWidth).toFixed(2);
var Top = parseInt((_h - parseInt(_w*bi))/2);
$(img).css({
"margin-top":Top,
"width":'100%',
"height":"auto"
});
});
});
}
})
</script>
</body> </body>
</html> </html>
\ No newline at end of file
src/pages/portfolioDetail.ejs
...@@ -32,12 +32,37 @@ ...@@ -32,12 +32,37 @@
<ul class="am-slides portfolioSiles" id="portfolioDel"> <ul class="am-slides portfolioSiles" id="portfolioDel">
<li> <li>
<div> <div>
<img src="../images/testImg4.png" /> <img src="../images/testImg4.png" />
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<img src="../images/testImg1.png" /> <img src="../images/testImg1.png" />
</div>
</li>
<li>
<div>
<img src="../images/testImg6.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg8.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg7.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg10.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg11.jpg" />
</div> </div>
</li> </li>
</ul> </ul>
...@@ -51,5 +76,57 @@ ...@@ -51,5 +76,57 @@
smoothHeight: true smoothHeight: true
}); });
</script> </script>
<script>
function pictureAuto(){
var _w = parseInt($(window).width());//获取浏览器的宽度
var _h = parseInt($(window).height());//获取浏览器的宽度
if(_w>640){
$("#portfolioDel img").each(function (i) {
var img = $(this);
var realWidth;
var realHeight;
$("<img/>").attr("src", $(img).attr("src")).load(function () {
realWidth = this.width;
realHeight = this.height;
var bi=(realHeight/realWidth).toFixed(2);
var mH=parseInt(_w*bi);
var Top=parseInt((_h-realHeight)/2);
console.log(_w);
//如果真实的宽度大于浏览器的宽度就按照100%显示
if (realWidth >= _w && realWidth >= realHeight) {
if(mH>_h){
$(img).css({
"max-height": _h,
"width": "auto"
});
}else{
$(img).css({
"max-width": _w,
"height":"auto"
});
}
}else if(realHeight >= _h && realWidth < realHeight ){//如果小于浏览器的宽度按照原尺寸显示
$(img).css({
"max-height": _h,
"width": "auto"
});
}else{
$(img).css({
"width": realWidth,
"height":realHeight,
'margin-top':Top
});
}
});
});
}
}
$(function(){
pictureAuto();
})
$(window).resize(function() {
pictureAuto();
})
</script>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment