Avatar billede krillejohansen Nybegynder
20. januar 2014 - 12:21

fast højde på billeder bxslider integration for wordpress

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; }
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester



IT-JOB