How to set image width to that of bootstrap column - html

This feels like a very simple problem that I am brain farting on. I have 3 images that I would like to display a certain way. Basically I want one image to fit a col-md/sm/xs-7 and 2 images to stack on top one another autofitting to col-md/sm/xs-3. All wrapped between a col-md/sm/xs-1 on either side.
I cannot figure out what CSS I need to tell the image to resize to that of the column. Any ideas?

Something like this?
<div class="row">
<div class="col-md-7">
<image class="img-responsive" src="largeimage.jpg" width="200" height="400"/>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-3">
<image class="img-responsive" src="yourSmallImage.jpg" width="200" height="200"/>
</div>
</div>
<div class="row">
<div class="col-md-3">
<image class="img-responsive" src="yourSmallImage.jpg" width="200" height="200"/>
</div>
</div>
</div>
</div>
I don't quite understand what exact way you are trying to arrange pictures but I think this should help you. If you paint me a picture of how you want the pictures arranged I'll tailor my answer to you.
Edit: Ok, I think I might(?) understand now and this is my solution. You'll have to either size the images the way you want. Or, hopefully they are already the size you want it and will fit nicely. Give this a try.

Related

How to make blog layout with Html Css

I am a beginner in web designing. I know some basics about layout in CSS.
I am tried to create a blog post layout, given in the picture below.
see image layout
Please help me to do that.
Welcome to StackOverflow! As heads up, usually you will want to come here for more specific questions to solve problems with your code, or to explain weird behavior you didn't quite understand. Your question is a little bit too open ended to be answered here but I can help you get started:
For starters, start thinking about translating every box in your picture into an HTML div. If you break each part of that picture into divs it can be a good foundation to add your css styling on top of. In your case, you might want something like this:
<div id="articleList">
<div id="article_1">
<div id="articleImage_1">
<img src="articleImage_1.jpg" alt="Picture #1">
</div>
<div id="articleContent_1">
<div id="articleTags_1"></div>
<div id="articleTitle_1"></div>
<div id="articleAuthorNameAndCommentsSubheader_1"></div>
<div id="articleBody_1"></div>
</div>
</div>
<div id="article_2">
<div id="articleImage_2">
<img src="articleImage_2.jpg" alt="Picture #2">
</div>
<div id="articleContent_2">
<div id="articleTags_2"></div>
<div id="articleTitle_2"></div>
<div id="articleAuthorNameAndCommentsSubheader_2"></div>
<div id="articleBody_2"></div>
</div>
</div>
</div>
Of course you would be generating each row inside a for loop or .map() type function. You would also add in your .css in a 'class' attribute for every div.
Please let me know if you find this helpful by selecting my post as the answer, and don't be shy if you have any more questions :)
If you know about boostrap than you can use this boostrap card to create that layout you want. Here is the sample code for it.
<div class="card w-50">
<div class="card-img-top d-flex align-items-center bg-light">
<div>
<img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff?
text=Image" alt="Card image cap">
</div>
<p class="col p-2 m-0">Text next to the right of the image</p>
</div>
</div>

How To Attach A Card To An Image

enter image description hereSo I am trying to get the last image to fall into the bottom left of the middle image however I can't get my image latch on to the bottom, instead, even if I make a new row, or use clearfix, the image will attach on to images/text/breaks below it.
<img src="https://via.placeholder.com/970x90" class="img-fluid" width="100%">
<img src="https://via.placeholder.com/970x400" class="img-fluid" width="100%">
<img src="https://via.placeholder.com/970x400" class="img-fluid card-img-overlay mt-auto" width="30%" height="30%">
Also I am trying to get my code all in html and none in css so bootstrap answers are greatly appreciated.
You can use col class of bootstrap for that.
<div class="row">
<div class="col-12">
<img src="https://via.placeholder.com/970x90" class="img-fluid" width="100%">
</div>
<div class="col-12">
<img src="https://via.placeholder.com/970x400" class="img-fluid" width="100%">
</div>
<div class="col-12">
<img src="https://via.placeholder.com/970x400" class="img-fluid card-img-overlay mt-auto" width="30%"
height="30%">
</div>
</div>
If you can explain a little more, maybe with screenshoots... I am guessing you are trying to work with CSS and Bootstrap... right? Please create a link for your code or send the code ... It´s easier this way... Give us more information so we can help you better! Take care buddy!

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>

Image gallery with different image sizes in bootstrap

I have two images with two different size. I am using bootstrap in my project. But I cant place the images together which looks like both have same dimension. I have gone through similar questions and tried a lot. Please help me to sort this out.
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="http://placehold.it/2048x1536" target="_blank">
<img src="http://placehold.it/2048x1536" alt="Nature">
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="http://placehold.it/1280x720" target="_blank">
<img src="http://placehold.it/1280x720" alt="Nature">
</a>
</div>
</div>
my css is
.thumbnail img {
height:250px;
width:100%;
}
You can do it by putting the picture as background-image for the 'div' tag and setting value of 'background-position' as 'stretch'.
Said that, if the images are of different resolution and you fit them into the same-size container it might look pixelated at times.

How to display thumbnails in article style using Bootstrap 3?

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.