In my web page I have an anythingsider running. Which looks like this
<ul id="slider-main">
<li>
<div class=" right-2 up-3 ">
<div>
<img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
</div>
</div>
</li>
<li>
<div class=" right-2 up-3">
<div>
<img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
</div>
</div>
</li>
And My Slider Image looks like this
But when the screen resolution is low like 1366x768 Image does not act as responsive. Only few part of the image is shown in web. Can any one please tell me what I am doing wrong here?
Note: CodePen Link to my demo source
One quick solution: update the image height to fit the height of the viewport.
$(".img-responsive").height($(".anythingWindow").height())
Now this still needs some tweaking because as specified in the question comments:
If the screen width is larger than the picture width, then a blank space will be shown to the right of the image.
As there is a footer, the bottom part of the image is still hidden by it, so you'll need to adjust the picture height to the view area height - the footer height.
In the end the code would be like this:
$(".img-responsive").height($(".anythingWindow").height() - $("footer > div").height())
.width("100%");
And that code must be called when the page loads and when the page resizes. You can see it working on this Codepen.
Related
I have a lot of elements (bootstrap html) that behave responsive on a website. This means that they do not have a fixed width or height.
In each element an image should be displayed.
I tried to work with height or width100% values. Also min-height or min-width I have tried. I also tried it with a div and its background-image.
I also found this similar posts on Stackoverflow:
Wrap image in fixed height and width
Displaying images with adaptive width and fixed aspect ratio
Unfortunately, the first post based on fixed height and width. The second post is very helpful, but I search for a solution without using JavaScript (if this task is not solvable with pure HTML and CSS, I would try it with JavaScript).
I work with default bootstrap elements like this.
<div class="row">
<div id="element1" class="col-sm">
<img id="img1" src="1.jpg" />
</div>
<div id="element2" class="col-sm">
<img id="img2" src="2.jpg" />
</div>
<div id="element3" class="col-sm">
<img id="img3" src="3.jpg" />
</div>
</div>
All images should have the same width and height, although the image files have actually not the same width and height on file system.
If the images are too small or too large, the image should be scaled. If the ratio of height and width should not be correct, only a matching section of the image should be displayed.
Of course I do not expect finished solutions, but I would be very happy about approach ideas.
I have a simple nav-bar designed with flexbox like this :
<div id="nav-bar">
<div class="nav-left">
<div class="logo-contain">
<img class="red visible" src="image01">
<img class="white transparent" src="image02">
</div>
</div>
<div class="nav-center">
<ul>
<li class="color01">01</li>
<li class="color02">02</li>
<li class="color03">...</li>
</ul>
</div>
<div class="nav-right">
<div class="box-panier"></div>
</div>
</div>
I made a pretty simple script that change the color of my nav-bar when scrolling and it's working fine. The problem is that when that script is called, the nav-bar does change like it's supposed to do but the img element move to the wrong place. It's supposed to be centered in the nav-left block but it's jumping to the right of the block. But if I open the chrome devtools and just change anything in the css like unchecking/cheking any css propretie, my img element is updating and go back in the right place, centered. So it looks like chrome isn't updating css well when my script is called.
Here is the exact same code in jsfiddle, exept it's working well here. I really don't know what's wrong because with the exact same code on my site is not working well.
> JSfiddle code
I am using GlideJS to display a carousel with images. I load this carousel in file A (carousel-test.php) by calling the following code:
<div id="carouselContainer"></div>
<script>
$( "#carouselContainer" ).load( "carousel.php" );
</script>
File B (carousel.php) contains the code of the carousel with the images:
<div class="module module--horizontal">
<div id="Carousel" class="glide">
<div class="glide__wrapper">
<ul class="glide__track">
<li class="glide__slide">
<div class="box" style="background-color: #77A7FB;">
<div>
<img src="http://www.brussels.info/grand-place-brussels.jpg" style="width:100%; height:100%;" />
</div>
</div>
</li>
<li class="glide__slide">
<div class="box" style="background-color: #FBCB43;">
Second slide
</div>
</li>
</ul>
</div>
<div class="glide__bullets"></div>
</div>
<script>
var carousel = $('#Carousel').glide({
type: 'carousel',
startAt: 1,
touchDistance: 2,
autoplay: 0,
autoheight: true
});
</script>
The problem is when you open file A (http://reistip.nl/carousel-test.php ) the first time, then the height of the image in the carousel is very small. The height should be 100% but is instead fixed to (about) 20 pixels. Once you start using the carousel, refresh the page or open the console.log the height of the image changes and becomes as it should be (100%).
How can I display the height of the image in the carousel to 100% when the page is opened for the first time?
(note: to reproduce this problem make sure to open a new tab in the browser after visiting file A, if you only refresh the page of file A the problem does not appear again)
you can't change the height of image by giving 100% because. an image height is already a 100% to it's height. if you really want to change the height of your image then you should define it in px value but i suggest you not to change the height because it will stretch your image. instead you can add certain height to your carousel wrapper and set overflow hidden. it will show the image inside wrapper and the overflow image will be hidden.
I'm using HTML, CSS and Jquery and I did a image hover effect with the watch image and I want to be able to add the same image and effect with multiple images vertically down the center of the page but it wont let me, here's the site in question! any help would be great!
<div id="header">
<h1></h1>
</div>
<div class="center12">
<img src="image/logocenter1.png" alt="** PLEASE DESCRIBE THIS IMAGE **">
</div>
<div id="nav">
<h2>
Home / Styles & Sizes /
Brands & Prices /
Watch Straps / Tips on buying used
</h2>
</div>
<div class="fadehover">
<img src="image/test1.png" alt="" class="a"> <img src="image/test1bw.png" alt="" class="b">
</div>
It seems like it should be simple, but it wont work.
Instead of using jquery and two images for gray scale effect, use the following:
By adding an css you can bring the same effect using a single image(no need of jquery and hover image).
Add this css:
<pre>
img.a:hover {
filter: url("");
}
</pre>
and remove the jquery and another gray scale image. If you don't want hover effect and the images are needs to be shown one by one down, remove one of the images inside the div and put it into a separate Div'
I have a list where each item contains a text and an image:
<div class="slider">
<ul>
<li>
<div class="txt"><p>First slogan</p></div>
<div class="img"><img src="http://placehold.it/800x180" /></div>
</li>
<li> ... </li>
</ul>
</div>
I need it to be responsive ... the img and txt divs scale on window resize.
After a certain point the img div becomes under the txt div as seen in codepen:
SLIDE EXAMPLE
This is working fine ... But now I need to make it work as a slider.
I am trying to make it using Cycle2 JQuery plugin:
SLIDE EXAMPLE WITH CYCLE 2
The height does not adapt to the slide content.
Could someone please help me out?
Thank you,
Miguel
If you take a look at their documentation here it has plenty of options to adapt the height like adding
<div class="slider" data-cycle-auto-height="1:1">
Hope that helps.