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

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.

Related

bxSlider Responsive Design - Adjusting Image Size

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

Ordered List Items with Images that overlap

I cant seem to get my ordered list have images that overlap, but when you hover over them it expands or shows the full image, im guessing this is done best with CSS and onhover function?
Here is the code i have, where i can get them to stack, but not sure how to make it when you hover over it pops up a bigger image of the card like that.
<ul id="sortable" style="list-style: none;padding: 0;">
<li class=ui-state-default >
<div style=height:30px>
<img src="data/ZEN/Adventuring_Gear.jpeg" style="width:233px;height:311px;border-radius:10px;">
</div>
<div style=height:30px>
<img src="data/ZEN/Adventuring_Gear.jpeg" style="width:233px;height:311px;border-radius:10px;">
</div>
<div style=height:30px>
<img src="data/ZEN/Adventuring_Gear.jpeg" style="width:233px;height:311px;border-radius:10px;">
</div>
</li>
</ul>

How to horizontal and vertical centering images after scaling them?

I meet a tricky problem.
I need to center horizontal and vertical images after scaling images.
Here is my HTML:
li {
float: left;
padding: .78125%;
width: 31.25%;
/*li tag height and width is not fixed for screen adaptation*/
}
<!-- The code run in mobile browser.So do not think too much fu*king compatibility-->
<ul>
<li>
<a href="link">
<img class="lazy" src="" data-original="">
</a>
</li>
<li>
<a href="link">
<img class="lazy" src="" data-original="">
</a>
</li>
<li>
<a href="link">
<img class="lazy" src="" data-original="">
</a>
</li>
</ul>
The problem is, images size is not fixed and them will scale with their original ratio.And after scaling, I need to center horizontal and vertical images.
I can center horizontal and vertical images without scaling. But I can't handle it if it need to scale.
(ps: Forgive my poor English. Can you understand my problem?)
You could take advantage of CSS to do this for you. Simply attach your background-image to a div like so:
<div class="resize-me" style=" background-image: url('http://dynamically/generated/url/here'); "></div>
Then in your css do this:
.resize-me {
background-size: cover;
width: 200px;
height: 200px;
}
That way, the url you attach can be any size, and CSS will scale up or down the image to be the width and height of the resize-me class. It should also center the image properly every time.
Essentially, when you use cover, CSS will determine the best fit for the image to completely cover the background of the div. So if you want to resize the div, you wont have to do any manual scaling of your images. This is essentially the same trick that developers used to use with standard images where you would use a clipping mask div over a block-level image. The difference is that it does the centering automatically, and you only need to create one DOM element.

Overlay one image with another without extending parent height

I had a front image on the page, inserted like this:
<h1>
<a href...>
<img .../>
</a>
</h1>
Now I want to add another image link, to overlay first one (it is smaller image so it would be Ok):
<h1>
<a href...>
<img .../>
</a>
<a href... style="position:relative;top:-150px;">
<img ... style="height:150px"/>
</a>
</h1>
It does what I want, but the height of the parent H1 is still enlarged by these 150px leaving silly empty space.
I made height of H1 predefined constant to solve this, however I'm interested in more proper / elegant solution.
First I need to mention if you are using inline styles remove it and add an external style sheet.
Below I am giving the answer with inline styles just because you have used them too in your question .Try the following:
<h1 style="position:relative;">
<a href...>
<img .../>
</a>
<a href... style="position:absolute;top:0;">
<img ... style="height:150px"/>
</a>
</h1>

how to position images in even positions

I'm designing a web UI using CSS + HTML and I'm in need of developing the following design.
I've designed the stucture as following.
<div class="slider-pager-container">
<div class="content">
<div class="slider-pager" id="slider-pager">
<a data-slide-index="0" href=""><img height="90px" src="/images/slider/thumbs/image_1_thumb.jpg" /></a>
<a data-slide-index="1" href=""><img height="90px" src="/images/slider/thumbs/image_2_thumb.jpg" /></a>
<a data-slide-index="2" href=""><img height="90px" src="/images/slider/thumbs/image_3_thumb.jpg" /></a>
<a data-slide-index="3" href=""><img height="90px" src="/images/slider/thumbs/image_4_thumb.jpg" /></a>
<a data-slide-index="4" href=""><img height="90px" src="/images/slider/thumbs/image_5_thumb.jpg" /></a>
</div>
</div>
</div>
The problem is that I want the images to be variable width but a fixed height. I've done that by using the height attribute in the img tab. I've used the following CSS to position the imgs in even positions.
.slider-pager{
display:table;
}
.slider-pager a{
display:table-cell;
}
this does the job but, the parent element is a fixed width of 970px and if the total width of all the imgs is less than that amount, it renders a huge gap in between two images. What I want to achieve is whatever the image width is, ( less than the parent element ) position the img tags in the center of the page. How can I achieve this without using CSS3 properties since I want this to be compatible with IE 6+.
CSS
.slider-pager{
margin: 0 auto;
}
Like this? - Fiddle