• 解決済 isseiaone

    (@isseiaone)


    こんにちは。

    現在sightと言うテーマを使用しています。このデモサイトでもわかるように上部にスライドがついているのですが、画像部分のサイズを変更したく、スタイルシート内にある下記内からサイズの変更をしようとしたのですが、
    サイズを変更したら画像が大幅に崩れてしまいます。

    /*** Slideshow ***/
    
    #slideshow, .slideshow {height: 290px; width: 975px; overflow: hidden; position: relative;}
    .slide {height: 290px; width: 975px; background: #ffea97;}
    .slide img {display: block; float: left; width: 640px; height: 290px; position: relative; top: -20px; left: -30px;}
    .slide .post {padding: 20px 30px 0;}
    .slide .post-category {font-size: 11px; color: #d9d9d9; text-transform: uppercase; margin-bottom: 5px;}
    .slide .post a {color: #000;}
    .slide .post .post-category a {text-decoration: none;}
    .slide .post .post-category a:hover {text-decoration: underline;}
    .slide .post h2 {margin-bottom: 5px;}
    .slide .post h2, .slide .post h2 a {color: #000; font-size: 24px; font-weight: normal; text-decoration: none;}
    .slide .post h2 a:hover {text-decoration: underline;}
    .slide .post .post-meta {font-size: 11px; font-style: italic; color: #656363; margin-bottom: 20px;}
    .slide .post .post-meta span, .slide .post .post-meta a {color: #000; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-style: normal;}
    .slide .post .post-meta a:hover {text-decoration: underline;}
    .slide .post .post-author {text-transform: uppercase;}
    .slide .post-content p {margin-bottom: 15px;}
    #larr, #rarr {display: block; width: 32px; height: 53px; position: absolute; top: 106px !important; opacity: 0.2; z-index: 99 !important;}
    #larr {background: #000 url("images/larr.png") 8px 50% no-repeat; left: 0 !important;}
    #rarr {background: #000 url("images/rarr.png") 11px 50% no-repeat; right: 0 !important;}
    #larr:hover, #rarr:hover {opacity: 1;}

    上記のCSSの↓部分のサイズを変更しました。

    #slideshow, .slideshow {<strong>height: 270px; width: 960px;</strong> overflow: hidden; position: relative;}
    .slide {<strong>height: 270px; width: 960px;</strong> background: #ffea97;}
    .slide img {display: block; float: left;<strong> width: 960px; height: 270px;</strong> position: relative; top: -20px; left: -30px;}

    こういったスライドショーの場合、CSSだけでなく何か画像の比率を変える場所が他にあるのでしょうか。是非ご教授ください。よろしくお願いします。

トピック「slideshowのCSSを変えると画像が横伸びしてしまう。」には新たに返信することはできません。