Hej..
jeg har nogle problemer med at få billeder i et bxslider galleri i wordpress til at tilpasse sig browseren dimensioner. Jeg vil gerne have det sådan at når man kigger i galleri igennem er både lav- og højformats billeder samme højde så det ikke hopper op og ned. Desuden vil jeg også meget gerne have det responsivt så når man skalere browseren op følger billedet med men har samme margen til venstre og i toppen.
Er der nogle der kan hjælpe herinde så ville jeg bliver utrolig glad.. Jeg vedhæfter css til bxslideren..
på forhånd tak
/*
BxSlider Integration for WordPress
WordPress plugin written by Vincent Prat, Marvinlabs (www.marvinlabs.com)
*/
/*
* BxSlider v4.0 - Fully loaded, responsive content slider
*
http://bxslider.com *
* Written by: Steven Wanderski, 2012
*
http://stevenwanderski.com * (while drinking Belgian ales and listening to jazz)
*
* CEO and founder of bxCreative, LTD
*
http://bxcreative.com */
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
position: absolute;
margin: 0 ;
top: 50px;
left: 180px;
width: 60%;
height: 60%
padding: 0;
*zoom: 1; }
.bx-wrapper img {
max-width: 100%;
display: block; }
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: solid #fff 5px;
left: -5px;
background: #fff; }
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%; }
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url(images/bx_loader.gif) center center no-repeat white;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000; }
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px; }
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline; }
.bx-wrapper .bx-pager.bx-default-pager a {
display: none;
background: #666;
text-indent: -9999px;
width: 20px;
height: 20px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; }
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000; }
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 10px;
background: url(images/controls.png) no-repeat 0 -32px; }
.bx-wrapper .bx-next {
right: 10px;
background: url(images/controls.png) no-repeat -43px -32px; }
.bx-wrapper .bx-prev:hover {
background-position: 0 0; }
.bx-wrapper .bx-next:hover {
background-position: -43px 0; }
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 0%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999; }
.bx-wrapper .bx-controls-direction a.disabled {
display: none; }
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center; }
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -11px no-repeat;
margin: 0 3px; }
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0; }
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -44px no-repeat;
margin: 0 3px; }
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px; }
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%; }
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px; }
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666666 \9;
background: rgba(80, 80, 80, 0.75);
width: 100%; }
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px; }
.bxslider-gallery.adaptive-height-off .gallery-wrapper .bxslider img {
max-height: 850px;
width: auto;
margin: 0; }
.bxslider-gallery.adaptive-height-off .gallery-wrapper .bx-wrapper .bx-viewport {
-webkit-box-shadow: 0 0 0 #ccc;
-moz-box-shadow: 0 0 0 #ccc;
box-shadow: 0 0 0 #ccc;
border: 0px none;
padding: 5px; }