image - Wooslider / FlexsliderRespnsiveImageが機能しない

Question

私はクライアント向けのポートフォリオサイトを作成しているので、レスポンシブ画像を機能させることが重要です。デザインをWordPressに変換する前は、すべてが100％機能していましたが、FlexsliderをベースにしたWoosliderというWordPressプラグインをインストールしました。画像にいくつかの問題があり、実際にピクセル化されるまで画像を爆破し、保存したサイズを超えて画像を拡大し続けます。

このプラグインを使用してスライドを作成するには、2つの方法があります。1つは投稿とページにすべての画像が添付されている方法、または個々のスライドを作成する方法です（投稿の場合と同様に、カテゴリごとにすべてを結合します）。

プラグインのCSSを試してみて、添付された画像によって作成されたスライドの問題を解決しました。最大幅：100％ではなく幅：100％を使用していました。これは他の属性の場合にも当てはまると思いました。、しかし今のところ運がなかった。私は高さも追加しようとしました：いくつかの場所で自動ですが、それでも運がありません。

プラグインの2つのCSSコードは次のとおりです

Flexslider css：

    /*
 * jQuery FlexSlider v2.1
 * http://www.woothemes.com/wooslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets */
.wooslider-container a:active,
.wooslider a:active,
.wooslider-container a:focus,
.wooslider a:focus  {outline: none;}
.slides,
.wooslider-control-nav,
.wooslider-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* wooslider Necessary Styles
*********************************/ 
.wooslider {margin: 0 auto; padding: 0;}
.wooslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.wooslider .slides img {max-width: 100%; display: block;}
.wooslider-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.wooslider .slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } 
html[xmlns] .wooslider .slides { display: block; } 
* html .wooslider .slides { height: 1%; }

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .wooslider .slides > li:first-child { display: block; }


/* wooslider Default Theme
*********************************/
.wooslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.wooslider-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .wooslider-viewport {max-height: 300px;}
.wooslider .slides {zoom: 1;}

.wooslider .carousel li {margin-right: 5px}

/* Direction Nav */
.wooslider-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}
.wooslider-direction-nav .wooslider-next {background-position: 100% 0; right: -36px; }
.wooslider-direction-nav .wooslider-prev {left: -36px;}
.wooslider:hover .wooslider-next {opacity: 0.8; right: 5px;}
.wooslider:hover .wooslider-prev {opacity: 0.8; left: 5px;}
.wooslider:hover .wooslider-next:hover, .wooslider:hover .wooslider-prev:hover {opacity: 1;}
.wooslider-direction-nav .disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Pause/Play */
.wooslider-pauseplay a  { width: 30px; height: 30px; text-indent: -9999px; background: url(../images/bg_play_pause.png) no-repeat 110% 0; position: absolute; bottom: 5px; left: 5px; opacity: 0.8; z-index: 9999; cursor: pointer; }
.wooslider-pauseplay a:hover  { opacity: 1; }
.wooslider-pauseplay a.wooslider-play { background-position: 0 0; }

/* Control Nav */
.wooslider-control-nav {width: 100%; position: absolute; top: 100%; margin-top: 10px!important; text-align: center; z-index: 9999; }
.wooslider-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.wooslider-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.wooslider-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.wooslider-control-paging li a.wooslider-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.wooslider-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.wooslider-control-thumbs li {width: 25%; float: left; margin: 0;}
.wooslider-control-thumbs img {max-width: 100%; display: block; opacity: .7; cursor: pointer;}
.wooslider-control-thumbs img:hover {opacity: 1;}
.wooslider-control-thumbs .wooslider-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .wooslider-direction-nav .wooslider-prev {opacity: 1; left: 0;}
  .wooslider-direction-nav .wooslider-next {opacity: 1; right: 0;}
}

2番目のプラグインCSS

    .wooslider .slides > li { list-style: none; float: left; }
.wooslider .slides img { max-width: 100%; border: 0; }
body .wooslider.wooslider-type-posts img, body .wooslider.wooslider-type-attachments img { max-width: 100%; border: 0; padding: 0; margin: 0; height: auto; }
body .wooslider .slides, body .wooslider .wooslider-control-nav, body .wooslider .wooslider-direction-nav { padding: 0; margin: 0; }
body .wooslider .wooslider-control-nav li, body .wooslider .wooslider-direction-nav li { list-style: none; }

/* Layout styles for the "Posts" slideshow type. */

/* Text Left and Text Right Options */
.wooslider .layout-text-left img { float: right; width: 40%; }
.wooslider .layout-text-left .slide-excerpt { float: left; width: 50%; }

.wooslider .layout-text-right img { float: left; width: 40%; }
.wooslider .layout-text-right .slide-excerpt { float: right; width: 50%; }

/* Full overlay enabled */
.wooslider .overlay-full  { position: relative; }
.wooslider .overlay-full .slide-excerpt { background: #000; opacity: 0.8; color: #FFF; position: absolute; padding: 1em; }
.wooslider .overlay-full .slide-excerpt .slide-title { color: #FFF; }
.wooslider .overlay-full img { float: none; width: 100%; height: auto; }

body .wooslider .overlay-full.layout-text-left .slide-excerpt { left: 0; top: 0; bottom: 0; width: 30%; padding: 1em; overflow: hidden; }
body .wooslider .overlay-full.layout-text-right .slide-excerpt { right: 0; top: 0; bottom: 0; width: 30%; padding: 1em; overflow: hidden; }
body .wooslider .overlay-full.layout-text-top .slide-excerpt { left: 0; right: 0; top: 0; height: auto; padding: 1em; overflow: hidden; }
body .wooslider .overlay-full.layout-text-bottom .slide-excerpt { left: 0; right: 0; bottom: 0; height: auto; padding: 1em; overflow: hidden; }

/* Natural overlay enabled */
.wooslider .overlay-natural  { position: relative; }
.wooslider .overlay-natural .slide-excerpt { color: #FFF; position: absolute; float: left; padding: 0; }
.wooslider .overlay-natural .slide-excerpt .slide-title { color: #FFF; background: #000; opacity: 0.8; float: left; padding: 0.5em 1em; margin: 0; }
.wooslider .overlay-natural .slide-excerpt p { color: #FFF; background: #000; opacity: 0.8; float: left; padding: 0.5em 1em; }
.wooslider .overlay-natural img { float: none; width: 100%; height: auto; }

body .wooslider .overlay-natural.layout-text-left .slide-excerpt { left: 0; top: 10%; overflow: hidden; }
body .wooslider .overlay-natural.layout-text-right .slide-excerpt { float: right; right: 0; top: 10%; overflow: hidden; }
body .wooslider .overlay-natural.layout-text-right .slide-excerpt .slide-title, 
body .wooslider .overlay-natural.layout-text-right .slide-excerpt p { float: right; }
body .wooslider .overlay-natural.layout-text-top .slide-excerpt { left: 0; top: 0; overflow: hidden; }
body .wooslider .overlay-natural.layout-text-bottom .slide-excerpt { left: 0; bottom: 0; overflow: hidden; }

/* "Slides" slideshow type */
body .wooslider .slide-content { margin: 0.5em; padding: 0; border: 0; width: auto; height: auto; }

/* Slide widget */
.widget_wooslider_slideshow_attachments .wooslider-direction-nav a  { padding: 0; }

body .wooslider.wooslider-type-posts img, body .wooslider.wooslider-type-attachments img, body .wooslider.wooslider-type-attachments img { max-width: 100%; border: none; height: auto;}
body .wooslider-control-nav { margin: 0; padding: 0; }
body .wooslider-control-nav img { border: 0; background: none; margin: 0; padding: 0; }
body .wooslider-direction-nav, body .wooslider-direction-nav li { list-style: none; margin: 0; padding: 0; }
body .wooslider.wooslider-type-slides .has-featured-image img.featured-image { max-width: 100%; height: auto; }
body .wooslider.wooslider-type-slides img { max-width: 100%; height: auto; }

どんな助けでも大歓迎です、乾杯

score 0 · Accepted Answer

この問題を解決しようとして読んでみると、ある時点で flexslider が画像の高さと幅を含む画像にスタイル属性を追加したため、サイズを変更することを目的とした CSS が役に立たなくなったようです。

flexsliderを初期化するための呼び出しの後にこれを追加しただけです:

$(this).find('li img').removeAttr('style');

これにより、画像からスタイル属性が削除され、CSS で幅を制御できるようになります。

score 0 · Accepted Answer

ichabod1799 によって提供された上記の CSS オーバーライドは、私にとっては完璧に機能しました。

.slides img { max-width: 100%; height: auto; width: auto; margin: 0 auto;}

image - Wooslider / FlexsliderRespnsiveImageが機能しない

2 に答える 2

Related

Reference