I have an img inside div. I want the image to be clipped off (half or three-fourth) using CSS.
E.g.: In the example from below: the final image should get cut, as specified by the user, either by 50%, 75%, etc.
Code:
<div class="row">
<div class="col-xs-6 col-xs-offset-2">
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png" />
</div>
</div>
Demo
Related
I want to show the image in right side of the top using bootstrap4, but don't know how to resize the image height to meet the same height (keep ratio) as left part
code (want to remove 200px)
<div class="container">
<div class="row">
<div class="col-sm">
<div class="alert alert-success">
why cannot I still use table for this kind of tasks? why cannot I still use table for this kind of tasks?
</div>
<div class="alert alert-info">
It is end of 2021
</div>
<div class="alert alert-info">
Now I'd updated to div, this contents can have more text
</div>
</div>
<div class="col-sm">
<img width="200px" src="https://www.codeply.com/images/partner_creativetim.png" />
</div>
</div>
</div>
see https://www.codeply.com/p/flP5E5EpWk
I approached it a different way although this may require you to edit the height and width of your image a little.
First I removed the image from that Div and added a class bg-smile
<div class="col-sm bg-smile">
<!-- stays empty -->
</div>
I've also added mb-0 to remove the bottom margin from the 3rd text box so the image exactly lines up at the bottom.
Then added a few CSS instructions for the new class and to make the smile image a background of the Div and center it.
.bg-smile{
background: url(https://www.codeply.com/images/partner_creativetim.png) 50% 50% no-repeat;
}
I'm looking for a way to maximize a map inside a Bootstrap row. In the following syntax, the left col-md-9 div is the map, and the right side is a fixed 240px wide image.
<div class="row">
<div class="col-md-9">
<div id="mapid" style="width: 100%; height: 400px;"></div>
</div>
<div class="col-md-3">
<p id="delta">
<%= #myimage %>
<br>
</p>
</div>
</div>
With a fluid layout, it can get ugly quickly. Is there a way to maximize the map in a fluid layout? I want the map to increase with the fluidity and the image retaining 240px with a small margin.
You can just do it with flexbox, and there are utilities from Bootstrap you can use: https://getbootstrap.com/docs/4.3/utilities/flex/
<div class="d-md-flex flex-md-row flex-md-nowrap align-items-md-start">
<!-- map -->
<iframe />
<!-- image -->
<img />
</div>
Since the map/iframe is setup as 100% width, normally this will push the other item off the row. But with flexbox, by default, the flexbox children have flex-shrink: 1; turn on. That means it will shrink for you. That's how you can get the width maximization for the map.
demo: https://jsfiddle.net/davidliang2008/x56ao2pz/8/
I am working on a mini project to recreate a website using bootstrap 4. I am on a part where I need to have three images in a grid format two on the top and one on the bottom. The top two should be even by height (not width the image on the right is larger) like the image below:
Notice how on the bottom (they are even at the top) they are perfectly even.
Now here is how mine looks:
See how the image on the left looks it is slightly higher then the one on the right.
Here is my code for that portion:
<div class="row justify-content-center">
<div class="col-md-4">
<img src="assets/home_seasonal_1.jpg" class="img-fluid" alt="Responsive image" >
</div>
<div class="col-md-6">
<img src="assets/home_seasonal_2.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
<br>
<div class="row justify-content-center">
<div class="col-md-10">
<img src="assets/home_seasonal_3.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
I have tried different variations of the columns and nothing has worked so far. The goal is to do this without modifying the css and only using bootstrap.
Here is the bootstrap version I am using:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
I just need some guidance on how I can make this happen.
Here are the images:
If you look at .img-fluid, it sets the max width to 100% and the height auto. That means, if the box that contains the image is narrow, the image might be scaled down and so is the height.
Also I realize, from your expected image, the top 2 pictures are shown from the bottom up while the last 1 is shown from top down.
Those points make me want to use those images as the background of those columns instead.
Structure
<div class="container">
<div class="row justify-content-center">
<!-- assets/home_seasonal_1.jpg -->
<div class="col-md-4" style="background: url('https://i.stack.imgur.com/A5PIq.jpg') center bottom /cover no-repeat"></div>
<!-- assets/home_seasonal_2.jpg -->
<div class="col-md-6" style="background: url('https://i.stack.imgur.com/zVUvf.jpg') center bottom/cover no-repeat"></div>
</div>
<div class="row justify-content-center">
<!-- assets/home_seasonal_3.jpg -->
<div class="col-md-10" style="background: url('https://i.stack.imgur.com/xhMX6.jpg') center top/cover no-repeat"></div>
</div>
</div>
Style
I am being lazy here to style them this way, but you can do inline css to set different styles for those columns. And I used white borders here to do the trick.
.row {
height: 12rem;
}
[class*="col-md"] {
border: 2px solid #fff;
}
Result
LOL it almost looks the same as your expected outcome!
fiddle: http://jsfiddle.net/aq9Laaew/144953/
I have been searching for answers everywhere and can't find one that fits my needs. So I created a Fiddle to explain what I want to achieve: http://jsfiddle.net/Fran6/jbo5pfs4/3/
HTML:
<div class="col1">
<img></img>
<h1>Title 1</h1>
</div>
<div class="col2">
<div class="box1"><img></img>
<h1>Title 2</h1>
</div>
<div class="box2"><img></img>
<h1>Title 3</h1>
</div>
<div class="box3"><img></img>
<h1>Title 4</h1>
</div>
</div>
I have containers positioned on the page. They have images and I would like to have them not stretched. I actually would like the same effect than for background-image: cover. That is my first question.
Then, I would like to have a zoom effect on the image when I hover it, via the link that is implemented with the title.
I can achieve these things separately but not together. Also, I started by using background images instead of in HTML but could not do the zoom effect.
So if anyone could help me solve my problem, that would be very nice !! :-)
Thanks !
I can complete the background-image: cover. Create a html tag with a id of 'cover' like so...
<div id="cover">
<!-- content -->
</div>
Then, you need to do the following in CSS.
#cover {
padding: 0, 0, 0, 0;
background: url(http://placehold.it/300x150) top left no-repeat;
background-size: cover;
height: 300px;
}
I would imagine to do the zoom effect, you could possibly use :hover although I'm not 100% sure.
Hope this helps though.
I have a container div which has text within it that I want centered. I want to also insert a div into the container which floats to the right, like this:
<div id="container" style="text-align:center">
Text
<div id="child" style="float:right"></div>
</div>
Unfortunately what happens is that the text is no longer centered with respect to the container, but is instead shifted to the left by the width of the child.
Does anyone know how to get the text to center whilst keeping the div contained to the right?
Something like this...
<div style='position:relative;'>
my centered text
<div style='position:absolute;right:0;top:0'>
my right div
</div>
</div>
You can obviously throw the inline styles into CSS.
Posibly this?? Creating 3 equal parts. left middle and right??
<div id="container">
<div id="child1" style="float:right width: 30px;"></div>
<div id="child2" style="float:right width: 30px; text-align:center;">TEXT</div>
<div id="child3" style="float:right width: 30px;"></div>
</div>