I'm using Flexslider and I don't want a image is stretched if the image is too small to fit the flexslider width, but it should be displayed centered, with its original width and height values and with a black background-color.
Is it possible? And what CSS changes I have to do?
set itemWidth property. It will adjust the image size inside the slider.
And add style
.slides li img {
width: 100%;
}
Related
For my website http://www.suemaisano.com/, I want to increase the homepage slider BACKGROUND IMAGE height (different than slider image, I did not set any slider image, only background image). I set the class as of the slider as homeSlider, and this is the code I put in the child CSS
.homeSlider .et_pb_slide .et_pb_container {
height: auto !important;
min-height: 1080px !important;}
However, the background image height did not change when I manipulated the min-height. The actual image sizes are ~1920x1080. Anything I need to change the code to make the min height work?
Thanks in advance!
Assuming the image goes into the div where the text appears, the below should give you the height that you are aiming for.
.et_pb_slide_content {height: 1080px; }
You need to set height on description container
.homeSlider .et_pb_slide_description {
min-height: 1080px;
}
Is There any way in CSS to Hide the Background Image from top when i resize the browser by changing the height and Hide the Background Image from right when i resize the browser by changing the width without the image gets shrink. Im able to achieve only hiding from right on maximum height. If I tried to resize on both sides the image gets shrink and not hided. Below is my CSS code.
body {
background-image:url("");
background-size:cover;
background-position:bottom left;
}
I want to hide the background image from top and right when I resize from any direction and for any width and height. Can someone plz help.
please check this for a try
#media (max-width:1200px){
body { background:none !important; }
}
So, I have a popup that opens for a gallery. The width of the image in the popup is set to 100%, stretching to fit it's containing div. And, the height is set to auto, so the height will resize, depending on the width (same ratio). This is great for wide images ... but for tall images, the tall images get cutoff at the bottom of the page. If the height is too tall (and the image is cutoff), then I want the height to shrink to a different size, and the width to adjust. I tried max-height, but that skews the image ratio (shrinking the height, but not affecting the width). Anyone have a better solution?
You can see the problem here:
Webpage
Click the image of the outside white door, with the flower bushes (the 8th image). You will see that the image is too tall for the page, and gets cut off at the fold.
Here is an image of the issue
Any ideas?
Do you want to have a CSS-only solution? Are you able to use Javascript?
If you can use Javascript you could add a condition to see if the height of the image is bigger than the window height and in this case add a class to change the behavior of the image.
var img = document.querySelector("img"); // Add correct selector here
if ( img.height > window.innerHeight ) {
img.classList.add("maxHeight");
}
img {
width: 100%;
height: auto;
}
.maxHeight {
height: 100%;
width: auto;
}
I've installed the basic version of Flexslider. I've removed the css related to div ID="main", so that the slider can stretch across my page.
However, the images don't adjust according to the new width.
This is what I mean.
I changed the width property for:
.flexslider .slides img
This does change the width, but the images still do not automatically align themselves to start on the left where the slider starts. There remains a kind of image overlap.
What needs to be changed in the CSS to have them aligned? Does FlexSlider only work with fixed image sizes, and not a fluid layout?
What I did was wrapped a span with a class to the image tag
<span class="className"><img src="images/slideImage-1.jpg"></span>
Then in the CSS I added
.flexslider .slides .className img{
width: 244px;
}
Hope that helps
Given the following CSS rule,
#block1 {
text-indent: -1000em;
background: transparent url(../images/xxx.png) no-repeat scroll center center;
width: 100px;
height: 50px;
display: inline-block;
}
Assume the image xxx.png is of dimension 100px by 50px. If I need to make this image displayed on #block1 looks smaller, can I simply change the width and height of #block1 or I have to first re-size the image and then change the width and height of the #block1 accordingly.
thank you
You can't in CSS1 and 2, but CSS3 supports the background-size property, which if you set to 100% should give you what you are looking for.
However, you probably should just resize the background image though, unless you have a compelling reason not to :)
CSS can only position the image, not adjust it. If you absolutely needed to resize the image through CSS, you'd have to have the image actually inserted as an img tag, then position it behind the content. It's best just to edit it.
no, the image will just appear to be cropped.