Фиксация моего короткого кода галереи в wordpress

Question

Я пытался выяснить, как исправить мой ярлык в 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 на дне. Второе и третье изображение не касаются нижней части 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%; } 

Был в течение нескольких часов, как я могу достичь желаемых результатов. Это нормально, если изображение является растениеводство, пока он подходит контейнер и качество не искажается

Answer 1

Измените стили, чтобы соответствовать этим:

-add границы собственности на gallery_box

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

-remove ".inner_gallery {маржа: 10px; маржа: 5px}" класс

-смен .inner_gallery IMG в:

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

Это быстрое решение для быстрого доступа, но оно выполняет свою работу. Пока вы в порядке с обрезкой.

Answer 2

Мое предложение было бы установить изображение в качестве фонового изображения его контейнера (или фонового изображения IMG тега, и установите СРК в пустое изображение для правильного масштабирования):

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