将图片更改为项目符号

Question

如果屏幕发生变化，如何将图像更改为子弹？我想将图像更改为子弹。

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;
}

Answer 1

我认为你正在使用缩略图主题。请改为使用basic theme。