Slide Gallery Picture Resize

Hi !

I have a slide gallery on my Home page that displays couple of pictures. But the problem is the pictures dont display in their original full size. The slide gallery only displays one half of the picture and the smaller pictures it displays in the middle of the slide gallery and leaves blank gray background on the left and the right side of the gallery.

How do I make my slide gallery stretch picture to fit the slide and dont crop the pictures but display them in full size.

Is there a code for the slide gallery to do that ?


I am using DiabloFun theme



Thank you !

seriously does anybody know a solution for this ?? anyone ?? my gallery slide bar really looks unprofessional with pictures not stretched and displayed at full size

here is the code for my slider copied from style.css

/*------------------------------ SLIDER ------------------------------*/
	.slider-container {
		margin:15px 0;
		background:url(images/slider.png) 50% top no-repeat;
		padding-top:7px;
		padding-bottom:34px;
	}
	.slider-nothumb .slider-container {
		background:url(images/slider-nothumb.png) 50% top no-repeat;
	}
	.slider-nothumb
	.slider {
		position:relative;
		width:884px;
		margin:0 auto;
		padding:0;
		border:none;
	}
	.fp-prev-next-wrap {
		margin:-1px;
	}
	.fp-prev,.fp-next {
		margin:0 5px;
		margin-top:-18px;
	}
	.slider-nothumb .fp-slides, .slider-nothumb .fp-thumbnail, .slider-nothumb .fp-slides-items {
		height:188px;
	}
	.fp-slides,.fp-thumbnail,.fp-slides-items  {
		height:377px;
		width:884px;
		-webkit-border-radius: 45px;
		-moz-border-radius: 45px;
		border-radius: 45px;
	}
	.fp-content-fon {
		border-bottom:none;
		border-left:none;
		border-right:none;
	}
	.fp-content-fon, .fp-content {	
		left:0;
		right:0;
		bottom:0;
	}
	.slider-nothumb .fp-content-fon {
		background:#fff;
	}
	.slider-nothumb .fp-content a,.slider-nothumb .fp-content p{
		color:#000;
	}
	.fp-nav {
		bottom:25px;
		right:30px;
		left:auto;
	}

}


/* WooCommerce */
.woocommerce a.button.alt, 
.woocommerce-page a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce-page button.button.alt, 
.woocommerce input.button.alt, 
.woocommerce-page input.button.alt, 
.woocommerce #respond input#submit.alt, 
.woocommerce-page #respond input#submit.alt, 
.woocommerce #content input.button.alt, 
.woocommerce-page #content input.button.alt,
.woocommerce-page #content .products li a.button {
	background:#361218 !important;
	color:#C6894F !important;
	border-radius:15px !important;
	-moz-border-radius:15px !important;
	-webkit-border-radius:15px !important;
	text-shadow:none !Important;
	box-shadow:none !Important;
	font-weight:normal !important;
	border:3px solid #2c2c2c !important;
}
.woocommerce a.button.alt:hover, 
.woocommerce-page a.button.alt:hover, 
.woocommerce button.button.alt:hover, 
.woocommerce-page button.button.alt:hover, 
.woocommerce input.button.alt:hover, 
.woocommerce-page input.button.alt:hover, 
.woocommerce #respond input#submit.alt:hover, 
.woocommerce-page #respond input#submit.alt:hover, 
.woocommerce #content input.button.alt:hover, 
.woocommerce-page #content input.button.alt:hover,
.woocommerce-page #content .products li a.button:hover  {
	background:#610e12 !important;
}
.widget.woocommerce.widget_product_search #searchsubmit {
	background:#6B1515;
	padding:2px 6px;
	color:#fff;
}
.woocommerce table.shop_table, .woocommerce-page table.shop_table {
	border:none !important;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle, .woocommerce-page .widget_price_filter .ui-slider .ui-slider-handle { 
	background:#b02323 !important;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range, .woocommerce-page .widget_price_filter .ui-slider .ui-slider-range { 
	background:#6B1515 !important;
}

what do I need to change here so pictures stretch and fit the slider and display in full size and not croped?

Hi!

COuld you give us the URL of your website, please.

Hi

I'm glad that somebody responded.

If I can I would not give out my link of the website just yet because It's not very well protected its still work in progress I dont want people to visit it and to register for it....also I don't want the idea of my website to be stolen by someone since this website of mine is still not Officially done and someone can easily do the same and launch his website before me.


Here are the screenshots of the problem: http://i.imgur.com/ARbo6nv.png
as you can see here the picture is not stretched to fit the slide bar

Here is another example: http://i.imgur.com/D9uSkox.png
here you can see that the picture is cut in half and does not display in full size


I given you the screenshots of the problem and my Slider style.css code can you help me from this information. I really dont want my website to be public or known right now for security reasons and copyright reasons.


I am using DiabloFun Theme.

If you need any more information please tell me.

Hope you can help me.

Thank you !

The only problem is the size of the images that you uploaded. You just have to edit the file before placing it to the website. The most appropriate slides size is 884*377px.

Ok...I will do that....but there is no code then I guess for the slider to do that automatically for because its a lot of extra work resize every single image

Thank for the help anyway !