Image sizes in bootstrap col-div - html

I have a page in three columns with col-md-4 like a thumbnail approach and then I have another page with col-md-8. In both I have to show an image, and I wondered if I can use the same image for both or if it would be better to have 2 images ( each with the propper size ).
<div class="col-md-4 col-sm-4">
<div class="product">
<a href="">
<img src="/media/{{ p.img }}" style="max-width: 100%;max-height: 100%;/> </a>
<div class="text">
<h3>Some text</h3>
</div>
</div>
#product img{
max-width: 100%;
max-height: 100%;
}
How can I resize the image to fit both, the 3 column grid and the 8 column with ( and keeping it responsive ).
Is it better to have two different images ? (one big and one small).

Use class="img-responsive" on the images.
http://getbootstrap.com/css/#images See the documentation for responsive images. The image will scale to the column size.
You should use the a format that fits in the larger column as images typically will scale down but become pixelated when scaling up.
The downside to using a large image in small slot is the larger the image typically the larger the file size and thus the slower to load, especially when dealing with mobile phones on 3g.

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)

MD Bootstrap carousel list of photos, "lock" height of all photos to the first one

I'm creating a carousel to display photos, which can be in different sizes and orientation. It all works really nice, except that when a big vertical photo is shown, white stips are messing my site.
As you can see, situation is not ideal. Can I do something with it when displaying with the carousel, or should i somehow resize images while uploading, add white stripes to the sides? (Im not very keen on resizing photos, they are important, as the site is about showing rental offers)
Snippet of the HTML:
<div class="row pb-3">
<div class="col-lg-9 ">
<mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'">
<mdb-carousel-item *ngFor="let photoUrl of selectedRental.photoList">
<img class="d-block w-100" [src]="photoUrl" alt="missing photo">
</mdb-carousel-item>
</mdb-carousel>
</div>
<div class="col-lg-3 about-me">
...
</div>
</div>
You will need to set static height for carousel images.
You said that the images have different sizes but you don't need to resize them manually when upload. We can show it properly on the UI with css like object-fit: cover, object-fit: fill, object-fit: contain, ....

Image as columns are taking a huge vertical space

I am new to web development and am trying to make things work with Bulma CSS.
I want to show five image icons which are links to my public profile. I want those icons to come in a single row, preferably covering the whole screen for bigger screens (with start and end padding of course), and for smaller screens, I would have them in rather two or three rows (and three or two icons per row).
So far I have been able to achieve most of this using Bulma columns. For desktops, the icons are coming in a row, not as a chain covering all the area, but in the center of row. For mobile, it is working as intended: two rows of icon covering the whole screen width, each row having three icons. It is not the best, but it would work.
The current output and its code look something like this:
Output
Code
<section class="hero is-light">
<div class="hero-body">
<h3 class="title is-h3">Important links.</h3>
<div class="columns is-mobile is-multiline is-centered">
<img src="assets/img/home/email.png" class="image is-1by1" height="64" width="64" alt="gmail">
<img src="assets/img/home/linkedin.png" class="image is-1by1" height="64" width="64" alt="linkedin">
<img src="assets/img/home/github.png" class="image is-1by1" height="64" width="64" alt="github">
<img src="assets/img/home/medium.png" class="image is-1by1" height="64" width="64" alt="medium">
<img src="assets/img/home/twitter.png" class="image is-1by1" height="64" width="64" alt="gmail">
</div>
<div class="columns"> </div><!-- empty column group for space -->
<div class="columns is-mobile is-multiline is-centered">
Download My Resume .
</div>
</div>
</section>
My problem is the space between title "Important links" and the icons. Why is there such a huge vertical space in between them? How can I reduce it?
I would also like to know if there is a possibility to show these icons as equally spaced and covering the whole width for large screens; while doing the current multi line behavior for smaller screens.
It would also suit me, if all the three things (the title, the images and the download button) show in the same row for large screen (like: the title at the start, the icons in the centre and and the button at end) and the current solution for small screen. I guess it would be possible via nav, but I am not sure if we should have a footer represented by a nav and its associated classes. Maybe a grid could be applied here too?
Note: I would prefer a Bulma CSS solution with no JavaScript/vanilla CSS, but let me know if it isn't possible.
The is-h3 element has a 24 pixels bottom margin, and the .columns element also has a margin, and these add up. You are going to need to write some CSS to remove this margin:
.title { margin: 0; }
.columns {margin: 0; }
(You should probably give them unique selectors instead of changing all title and columns.)

responsive group of images

I've been trying to make a group of images-list page using bootstrap but I can't make it responsive on other resolutions, The images moves left and the entire style of the arrangement will break.
<div class="fluid-container">
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
in this one ^ The images appears in 1-row and not sided to each other, And when I use style="float: left;" it works but not responsive as I wished, Is there a better way to make a better album{images-list} using bootstrap?
Your images are responsive.
In the sense that they do scale down depending on parent size.
Here is how .img-responsive is defined in Bootstrap 3:
display: block;
max-width: 100%;
height: auto;
Please note, as Sreemat well pointed out, you do not need to wrap the images in <div>s since they already have display:block.
The problem is most people, when they say responsive they also expect it to grow in size according to the parent's width, which .img-responsive does not do, as doing that has the potential of making small images look really bad.
But if that's your desired behavior, add this to your CSS:
.img-responsive {
min-width: 100%:
}

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.