How to display thumbnails in article style using Bootstrap 3? - html

I have 3 images which I need to display this way:
I tried to make it using simplest way:
<div class="row">
<div class="col-xs-9">
<img src="/image/1.jpg">
</div>
<div class="col-xs-3">
<img src="/image/2.jpg"><br /><br />
<img src="/image/2.jpg">
</div>
</div>
But there is a problem with sizing: images are uploaded by user so all of them can have different sizes and proportions (so image can be a square instead of rectangle). Also I need to limit max-height of the row because images can have up to 1024px height.
Can you help me, please? Thanks in advance.

Related

CSS, Bootstrap, HTML - Shrink responsive Images to get equal size in the row

I am kind of new in web design and I am having issues to properly resize images with the class img-fluid in a certain view where they act as some kind of thumbnails inside a portfolio-item. I am going to upload a couple of images to explain what I am trying to achieve. The first image is what I am trying to do, around 3-4 items per row with the same size , the problem is that when I show one image that is vertically bigger than horizontally it also gets bigger resolution than the other images , messing my row entirely and adding some empty spaces
This second image ilustrates the problem, 2 is the image that is bigger in height and it messes the other elements depending on the position that image gets placed.
Here is the HTML code :
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6 mb-2">
<!-- Portfolio item -->
<div class="portfolio-item">
<a class="portfolio-link" href="someurl">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="sourceofimage" alt="default" height=auto/>
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">some text</div>
<div class="portfolio-caption-subheading text-muted">some text</div>
</div>
</div>
</div>
</div>
</div>
And CSS of img-fluid
.img-fluid {
max-width: 100%;
height: auto;
}
Can anyone help me with this ?
Use both height and width. Set the width to how ever many pixels or any other increment you would like, and the same for the height.
The code: https://codepen.io/flvffywvffy/pen/OJjoeKP (ignore the javascript)

shouldn't col height in Bootstrap just cover the content unless mentioned otherwise?

I am working on a code on the online training I am taking on bootstrap. I am following the exact steps as mentioned in the training but in my result the height of the row I am creating is much higher than it should be.
So the training is on Bootstrap 3, but I am using bootstrap 4 (in case that is important information). I create a row and then two columns each col-md-2 for img and then put images on them. But then the height of the columns are much higher than what it should be.
<div class="container">
<div class="row">
<img src="images/carousel-1.jpg" alt="1" class="col-md-2" />
<img src="images/carousel-2.jpg" alt="2" class="col-md-2" />
</div>
</div>
I want the height of columns to be the size of the images with acceptable padding and margin, and not 3 to 4 times bigger.
Picture of my website:
You can also add class="img-responsive" to each img element. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
<div class="container">
<div class="row">
<div class="col-md-2">
<img src="images/carousel-1.jpg" alt="1"/>
<img src="images/carousel-1.jpg" alt="1"/>
</div>
</div>
</div>

When disabling class="img-responsive", bootstrap columns overlaps

I am new to Bootstrap, recently working on an Angular2 project, having a question to ask.
Currently I have a map-component left-hand side occupying 3 columns, however every time when I resize/shrink the browser, the image resizes/shrinks too. But I want the image to remain the fixed size whenever user resize the browser. So I delete the class="img-responsive" in the img tag. But those two components ended up overlapping when I shrink the browser. I am wondering why and could anyone please help me out.
For base app-component:
<div class="row ">
<div class="col-md-3">
<legend-component class="legend-component"></legend-component>
<map-component></map-component>
</div>
<div class="col-md-9">
<sidebar-component></sidebar-component>
<table-component></table-component>
</div>
</div>
For the map-component, I have the corresponding map-template to render my image:
<div align="center" >
<div class="row" id="images">
<div class="col-sm-12">
<img class="img-responsive" [src]=getImageSource() height="90%"/>
</div>
</div>
</div>
For normal full-screen sized browser:
Shrink the browser before disabling class="img-responsive":
Shrink the browser after disabling class="img-responsive":
If you want the image to stay to a certain size, I'd suggest defining a fixed width/height for the image. img-responsive resizes the image to the size of it's container's width.
Give the image a max width. The img-responsive mainly changes the picture's width.

responsive image and the tile not scaling properly in highresolution monitor and retina display

I have large image similar to this. I need to put there images in bootstrap and align these to get layout similar to this. such that there tiles are arranged in a grid of 3 * 3. I was able to get these alignment with defult bootstrap classes like pull-right setting min width. but it does not show properly scale up in retina display and high resolution monitor how do I proceed using bootstrap 3. thanks in advance
Remove pull-right, min-width and put the image inside a bootstrap div with img-responsive class.
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="" alt="" class="img-responsive">
</div>
<div class="col-sm-8">
//your text
</div>
</div>
</div>

How to make image responsive with Bootstrap?

I'm building a website which will list some buildings for sale with a picture and a small description. Since I want the website to be responsive I'm trying to use the Bootstrap3 grid system.
So the current html I have is as follows (running code here on bootply):
<div class="container">
<div class="row">
<div class="col-sm-8">
<article class="row property-ad">
<div class="col-sm-4">
<img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg">
</div>
<div class="col-sm-8">
<div class="property-ad-title">Nice building</div>
<div class="property-ad-description">and some describing text here</div>
</div>
</article>
</div>
<div class="col-sm-4">
<div class="right-side-ad">
some advertisement is going here
</div>
</div>
</div>
</div>
The problem is that the title and description are only displayed correctly on a large (lg) screen. On an md or sm screen however, the title and description are partly displayed on top of the image because the image appears larger than its container. I tried giving the image a max-width: inherit;, but that doesn't seem to do anything.
Next to the fact that I don't know how to give it a proper max-width, the main problem seems to be that I don't really know what behaviour I would want. Because if the image resizes its width, it would either get distorted, or it would also need to change its heigth. If the height changes however, the text next to it could get a larger height than the image, which would also make the layout look messy.
So my main questions;
What is the typical desired behaviour to make a website responsive when working with images that are next to text?
How would I implement that?
All tips are welcome!
Don't use your custome class for the img just add the bootstrap class for responsive images
img-responsive
<div class="col-sm-4">
<img class="img-responsive" src=".....jpg">
</div>
Check this Bootply
Simply stated: Bootstrap has the img-responsive class, or you could set max-width: 100% to the img tag.