bxSlider Responsive Design - Adjusting Image Size - html

With bxSlider, is it possible to show different parts of images depending on device?
For example, show this on Desktop:
And show this on Mobile:
This image-sizing makes sense from a design perspective because if you were to feature the desktop version on mobile and keep the width and height proportion and keep the width at 100% (as how it's done in the default setting), the image height becomes just too small. Thx in advance.
<ul class="slider" style="padding:0px !important;">
<li><img src="img/image1.png">
<div class="caption1"><p>image1</p></div>
</li>
<li> <img src="img/image2.png">
<div class="caption2"><p> image2 </p> </div>
<div class="caption3">caption </div>
</li>
<li><img src="img/image3.png">
<div class="caption1"><p>image3</p></div>
</li>
</ul>

The answer is yes, you can.
You can use css with different attributes for different screens.
Read more about it in this link: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Then, you can use object-fit to fit the image for a shorter container:
https://www.w3schools.com/css/css3_object-fit.asp

Related

How do I crop image in a fixed height slider for mobile view only in CSS?

I am working on a new site where i have a fixed min-height slider 500px due "visible above the fold content" but i was struggling the whole day because on mobile view i want to get it centered and cropped. I would like to know what i have to modify in css that stay centered like now but not going to shrink from both sides instead its going to be cropped from both sides dynamically dependent from the ratio. I am looking for the answer like the whole day but haven't found a good solution anywhere.
My project: http://guede.com/horvath/index.html
Mobile Print Screen
Similar to this site:
https://www.invisionapp.com/blog
I hope somebody can help with it. Thanks...
CSS
.moto-widget-slider li{
text-align:center;
width:100%;}
.moto-widget-slider li img{
width:100%;
display:inline-block;
min-height:500px;}
HTML
<ul class="moto-widget-slider-list" data-moto-slider-options='{"slideshowEnabled":true,"slideshowDelay":5,"slideshowAnimationType":"fade","showNextPrev":true,"showPaginationDots":true,"showSlideCaptions":true,"itemsCount":3}'>
<li><img src="mt-content/uploads/2017/10/slider3-min.png" alt="slider3-min.png"/>
</li>
<li><img src="mt-content/uploads/2017/10/slider1-min.png" alt="slider1-min.png"/>
</li>
<li><img src="mt-content/uploads/2017/10/slider2-min.png" alt="slider2-min.png"/>
</li>
</ul>

Stop Image from re sizing containing DIV

I am working on a site that uses the 960 grid system. It has an issue with the navigation. Rather then try to explain, I'll show you a picture of what I'm going for
I figured the best way to do this would be to have a DIV called navHolder that stretches the whole way across the screen. Inside navHolder is a div with a class of container the hold it in the 960 system. I would give navHolder a top and bottom border to achieve the effect.
Here is the HTML
<div id="navHolder">
<div class="container_12">
<div class="grid_4" id="leftNav">
<ul class="leftNav">
<li>About Us</li>
<li>ABG Way</li>
</ul>
</div>
<div class="grid_4" id="logo">
<img src="images/abg_website_logo_2014.jpg" alt="abgLogo" id="mainLogo"/>
</div>
<div class="grid_4" id="rightNav">
<ul class="rightNav">
<li>Portfolio</li>
<li>Media</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
The issue is that the image forces navHolder to become large, so the top and bottom border lose the desired effect.
Here is a screenshot of the image making it too large
Screenshot
I attempted to give the image an
position:absolute
to stop it from resizing the div. This works, however, this causes the navigation options to collapse behind it.
Here is a screenshot
I attempted to create a fiddle to recreate this scenario
Fiddle
But its not quite the same.
My question is then, is there a way to set this image so that it doesnt resize its containing DIV AND still holds its place with the navigation so its on both sides of the image? Is there a better way to go about this then what I am currently doing?
I'd give the container <div> desired size and set the image as it's background without repeat instead of using an <img>, and apply background-size: 100%;
Look into more CSS Background Properties # MDN
I would go about this by overriding the gird (only for nav).
so it would be
#navHolder .grid_4
{
float:none;
display:inline-block;
vertical-align:middle;
}
You would also need to offset the random white space display:inline-block gives so set the font size of the parent wrapper in this case #navHolder font-size:0;
#navHolder
{
font-size:0px;
}
here is your fiddle with my changes
http://jsfiddle.net/bCzK5/4/

Fix spacing around an image using the .thumbnail class in Bootstrap?

I am using bootstrap v2.3.1, and I am trying to understand how to fix one of my images.
In the example image link below, the top image is what I want all the images to look like when the screen is resized to it's smallest size (cellphone size), and the bottom image is what's giving me an issue:
http://i.imgur.com/BH02ONQ.jpg
For some reason it has more space on the sides of the 2nd image than it should have.
(NOTE: My screenshot is altered to show both the correct image and the wrong image. The code below is what I am actually using)
My code is this:
<section>
<ul class="thumbnails">
<li>
<a class="thumbnail" rel="group" href="images/r1.jpg">
<img src="images/thumbnails/r1s.jpg" alt="" />
</a>
</li>
<li>
<a class="thumbnail" rel="group" href="images/r2.jpg">
<img src="images/thumbnails/r2s.jpg" alt="" />
</a>
</li>
</ul>
</section>
So I don't know if it's an issue with one of the settings in the CSS file, but since I am using the .thumbnail class, I'm guessing it has to do with that?
Does anyone know how to make it so that I don't get all that extra space around my images when using the .thumbnail class?
My solution is set the CSS to the <ul class="thumbnails"> with style="max-width: 100px" where 100px is smallest width size of image in list.

Responsive CSS with Images

I am trying to achieve the following in the image posted below. When I resize the browser I want the image and button to decrease in size but maintain the same ratio with the main background. I also want the text to not overlap the image so the font size should get smaller. How can I achieve this in css? Heres the image: http://i.imgur.com/2qR2y4E.png
This is the HTML code I believe should be correct. I've tried in the CSS absolute positioning of the image, i've tried floating each element and using percentages for widths. If it gets to a mobile width I would just display:none on the image but keep the button. Any help is appreciated.
<div class="content">
<div class="text>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</div>
<div class="image">
<img src=".." />
<div class="button"></div>
</div>
</div>
I have created a fiddle based on the link by Jake - http://jsfiddle.net/GkrpR/2/
It changes the size of the image and text box when you resize the screen.
It's a bit rough, so will require you to change the css values to suit your needs. But should be a good start for you.
It uses media queries in the css to check the max screen size, and then changes styles based on that.
As an example, when the screen size gets to 300px or less the following style is used:
#media screen and (max-width:300px){
.image img{width:45px;height:50px;}
.text{height:30px;font-size:6pt;color:#aaf;}
.main{width:100px;}
}
Hope this helps

HTML elements overlap in IE 7 ONLY

I have a page that looks great in every browser except IE 7, where the table in the center overlaps the grey section below. I have a fixed height on the center section for continuity between pages, so that needs to stay in place.
http://www.bikramyoga.cz/rozvrh.htm
I have tried to add a min-height, max-height, etc, !important declarations and the like, and nothing seems to keep the table within the 510px container.
I have run into this problem a couple of times. Try adding:
<div style="clear: both;"></div>
Right after:
<ul id="legend">
<li><img class="rozvrh" src="img/dot.png" alt="czech class">Česká lekce</li>
<li><img class="rozvrh" src="img/box.png" alt="english class">Anglická lekce</li>
<li><img class="rozvrh" src="img/dud.png" alt="babysitting">Česká lekce s hlídáním dětí</li>
</ul>
</div>