0

wordpressでギャラリーのショートコードを修正する方法を見つけようとしています。基本的には、ユーザーがショートコード内に任意のサイズの画像を配置でき、表示時に伸びたり歪んだりしないようにすることが目的です。

これは、次のように見えるはずです

http://i255.photobucket.com/albums/hh140/testament1234/Thumb_zpsf57e544b.jpg

これは私がそれをコーディングしたときに思いついたものです。

http://s255.photobucket.com/user/testament1234/media/thumbnail_zpsd95f993d.jpg.html?sort=3&o=0

最初の画像の下部に 5px の余白がないことに気付いた場合。2 番目と 3 番目の画像は、div の下部に触れていません。

function.ph のコードは次のとおりです。

//Gallery Shortcode 2
function short_gallery($atts, $content = null) {
extract(shortcode_atts(array(), $atts));
return '<div class=" gallery_box"><div class="inner_gallery"><a class="fancybox"  href="'.$content.'"><img src="'.$content.'"/></a></div></div>';
}
add_shortcode("gallery", "short_gallery");

そして、これが私のスタイリングのコードです。

.gallery_box{background-color:#E8ECEF; float:left; margin:0px 20px 10px 0px; width:250px; height:200px; overflow:hidden }

.inner_gallery{margin:10px; margin:5px}
.inner_gallery img{max-width:100%; }

どうすれば望ましい結果を達成できるかについて何時間も研究してきました。入れ物に収まり、画質が乱れなければクロップでもOK

4

2 に答える 2

0

これらに合わせてスタイルを変更します。

-gallery_box に border プロパティを追加

.gallery_box{
background-color:#E8ECEF; 
float:left; 
margin:0px 20px 10px 0px; 
width:250px;     
height:200px; 
overflow:hidden; 
border:5px solid #E8ECEF; 
}

-「.inner_gallery{margin:10px; margin:5px}」クラスを削除

- .inner_gallery img を次のように変更します。

.inner_gallery img{
  max-width : 400px;
  max-height : 400px;
}

これは簡単なショートカット ソリューションですが、仕事は完了します。トリミングがOKなら。

于 2013-07-09T15:09:46.477 に答える
0

私の提案は、イメージをコンテナの背景イメージ (または img タグの背景イメージとして設定し、適切なスケーリングのために src を空白のイメージに設定すること) です。

<figure>
    <img src="BLANK_IMAGE_WITH_YOUR_TARGET_SIZE" style="background-image:url('URL')" alt="My Image" />
</figure>

次に、背景サイズをカバーするように設定します。

figure { width:250px; border:solid 5px #666; margin:0 20px 10px 0; }
figure img { width:100%; background-size:cover; background-position:center center; background-repeat:no-repeat; }
于 2013-07-10T02:44:31.513 に答える