2017-12-31 70 views
-2

画面が変更された場合、画像を変更するにはどうすればよいですか?私はイメージを弾丸に変えたいと思う。画像を変更する

image

CSS:

.fslider, 
.fslider .flexslider, 
.fslider .slider-wrap, 
.fslider .slide, 
.fslider .slide > a, 
.fslider .slide > img, 
.fslider .slide > a > img { 
    position: relative; 
    display: block; 
    width: 100%; 
    height: auto; 
    overflow: hidden; 
    -webkit-backface-visibility: hidden; 
} 

.fslider { min-height: 32px; } 

.flex-container a:active, 
.flexslider a:active, 
.flex-container a:focus, 
.flexslider a:focus { outline: none; border: none; } 
.slider-wrap, 
.flex-control-nav, 
.flex-direction-nav {margin: 0; padding: 0; list-style: none; border: none;} 

.flexslider {position: relative;margin: 0; padding: 0;} 
.flexslider .slider-wrap > .slide {display: none; -webkit-backface-visibility: hidden;} 
.flexslider .slider-wrap img {width: 100%; display: block;} 
.flex-pauseplay span {text-transform: capitalize;} 

.slider-wrap:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slider-wrap {display: block;} 
* html .slider-wrap {height: 1%;} 

.no-js .slider-wrap > .slide:first-child {display: block;} 

//ViewPort (Big Image) 
.flex-viewport { 
    max-height: 2000px; 
    -webkit-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 

//Nav 
.flex-control-nav { 
    position: absolute; 
    z-index: 10; 
    text-align: center; 
    top: 14px; 
    right: 10px; 
    margin: 0; 
} 

.flex-control-nav li { 
    float: left; 
    display: block; 
    margin: 0 3px; 
    width: 10px; 
    height: 10px; 
} 

.flex-control-nav li a { 
    display: block; 
    cursor: pointer; 
    text-indent: -9999px; 
    width: 10px !important; 
    height: 10px !important; 
    border-radius: 50%; 
    transition: all .3s ease-in-out; 
    -webkit-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
} 

.flex-control-nav li:hover a, 
.flex-control-nav li a.flex-active { background-color: #FFF; } 

/* Flex Slider - Thumbs 
-----------------------------------------------------------------*/ 

.fslider[data-animation="fade"][data-thumbs="true"] .flexslider, 
.fslider.testimonial[data-animation="fade"] .flexslider { height: auto !important; } 

//Thumbs <ol> 
.flex-control-nav.flex-control-thumbs { 
    position: relative; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: 2px -2px -2px 0; 
    height: 110px; 
} 

//Margin and Background of each images 
.flex-control-nav.flex-control-thumbs li { margin: 0 2px 2px 0; background-color: #EBEBEB; } 

.flex-control-nav.flex-control-thumbs li img { 
    cursor: pointer; 
    text-indent: -9999px; 
    border: 0; 
    border-radius: 0; 
    margin: 0; 
    -webkit-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
} 

//Width and Height of an image 
.flex-control-nav.flex-control-thumbs li, 
.flex-control-nav.flex-control-thumbs li img { 
    display: block; 
    width: 100px !important; 
    height: 110px !important; 
} 

//Put some transition and border for an active image 
.flex-control-nav.flex-control-thumbs img, 
.flex-control-nav.flex-control-thumbs li img.flex-active { 
    -webkit-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    border: 2px solid #FF5501; 
} 
+0

質問が不明です。あなたが何を言っているのか理解できません – Keynes

+0

画像の 'DOT 'はどこですか?それをサークルして、もう一度投稿できますか? – Keynes

答えて

1

私はあなたがサムネイルのテーマを使用していると思います。代わりにbasic themeをお試しください。

関連する問題