I am trying to resize an image to fit win within these parameters but if I use img-responsive its too small? I just need it to be a fixed size or adjust to the screen resolution if possible?
<div class="container-fluid f2p-nav hidden-sm hidden-md hidden-lg">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"><img class="image-container-center img-responsive" src="images/f2p6.png" alt="Chania"></div>
<div class="col-xs-4"></div>
</div>
</div>
and the css is :
.image-container-center {
margin-top:27px;
display: flex;
justify-content: center;
}
Fiddle
I think you don't need to resize an image in order to fit into a certain column in bootstrap you just need to use a unit percentage in setting an image size for example in width, height, max-width or min-width. Here's the following code. I hope this will help you.
<div class="col-xs-4"><img class="image-container-center img-responsive" src="images/f2p6.png" alt="Chania" style="width: 100%; height: 100%"></div>
Related
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/
This css took out the responsive layout of the Cards from the Boostrap 4. How can i put a object-fit: cover; on the image of the Card, and have the responsive layout from the Bootstrap 4?
#imgUNcover {
width: 285px;
height: 145px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">
<div class="card">
<div class="img-container">
<img src="<?php echo $UN['capa']?>" alt="<?php echo $UN['alt']?>" class="card-img-top" id="imgUNcover">
</div>
<div class="card-body">
<a href="index.php?post=<?php echo $UN['title']?>" class="card-title cardTitleLink">
<h1 class="cardTitleUN">
<?php echo $UN['title']?>
</h1>
</a>
<p class="card-text text-muted">
<?php echo $UN['text']?>
</p>
Continue Lendo
</div>
</div>
</div>
Without object-fit: cover;:
With object-fit: cover;:
I could change the width of the imagen on the id #imgUNcover, but it will not solve the problem in different resulution screens.
Edit:
Susi, I am going to go out on a limb here and just guess what you are looking for. Do let me know if you need another outcome, and I will adjust the answer
In order for image to resize with the size of its containing block you place a percentage value on the height or the width. Please find a code example below.
Some Interesting Notes (in case you want to dive a bit deeper):
You do not have to set both height and width, on the image element
It is good practice to do so, but it is not necessary
The reason is that the computed value of the dimension which is not set, defaults to auto. That in turn, results in a used value for that property equalling: used value of other dimension / intrinsic image ratio
In practice, that means the height or width you did not set will shift, so that the element's content box will be of such as size that the aspect ratio of the content box would be identical to the intrinsic aspect ratio of the image
As a result of this, changing object-fit will have no effect, except if you put it to none (none: Image would keep its intrinsic dimensions, while its content box remains what you set it to)
In this case we want to use % value(s), to enable resizing when the size of the card changes (responsiveness)
We must then make sure the container block has that particular dimension set
If it was not set (auto by default), its size would be equal to that of its content
That would lead to an unsolvable circular reference: The child wants to be a percentage of its parent's size, and the parent's size tries to be equal to its child(ren)
In that case, the percentage you set on the content box would default to auto
Which means it would act like it was not set at all
If no height/width is set, content box's used values for height/width is set equal to intrinsic height/width of image
Thus, content box will most likely be large (unless image is small), and overflow its container (see overflow property)
Finally, object-fit only applies if intrinsic aspect ratio of image is different than the dimensions (height/width) you set on the element's content box
Closing remarks:
Pheeew, a lot of notes, but hopefully that is helpful to you in terms of explaining how height / width of inline replaced elements work
The CSS2.1 spec for height / width of various elements can be found here: 10 Visual formatting model details
MDN article of object-fit can be found here: MDN object-fit
Code:
#imgUNcover {
width: 100%;
object-fit: contain;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">
<div class="card">
<div class="img-container">
<img src="https://www.dailydot.com/wp-content/uploads/2018/05/crush.jpg" class="btn btn-outline-danger btn-sm" alt="blabla" class="card-img-top" id="imgUNcover">
</div>
<div class="card-body">
<a href="#" class="card-title cardTitleLink">
<h1 class="cardTitleUN">
Some title
</h1>
</a>
<p class="card-text text-muted">
foo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foo
</p>
Continue Lendo
</div>
</div>
</div>
Finally, a pen so you can easily try resizing the browser (to check that it is responsive): https://codepen.io/magnusriga/pen/xazZzg?editors=1100
UPDATE (added functionality as requested in comment):
To make sure all images are same height, you set a specific height on the cards, then distribute that across the image area (top section) and body section of the card using flexbox's flex-basis property. To avoid that the flex items grow outside their flex container, just use overflow: auto, which tells the block box to add scrollbars if necessary.
The tedious part of modifying Bootstrap functionality, is that there are a lot more factors to check vs just building it from scratch yourself. And many times you have to put in !important to overrule their descriptors.
New code:
.card {
height: 400px;
}
.img-container {
flex: 1 0 30% !important;
// max-height: 30% !important; // <-- Alternative
overflow: hidden;
}
.card-body {
flex: 1 0 60% !important;
// max-height: 60% !important; // <-- Alternative, though still need to control overflow
overflow: auto;
}
#imgUNcover {
width: 100%;
height: 100%;
object-position: 50% top;
object-fit: cover;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">
<div class="card">
<div class="img-container">
<img src="https://qph.fs.quoracdn.net/main-qimg-fdaa32b9bffc30131e56956e4bc1e9e4.webp" class="btn btn-outline-danger btn-sm" alt="blabla" class="card-img-top" id="imgUNcover">
</div>
<div class="card-body">
<a href="#" class="card-title cardTitleLink">
<h1 class="cardTitleUN">
Some title
</h1>
</a>
<p class="card-text text-muted">blabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalbla
</p>
Continue Lendo
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">
<div class="card">
<div class="img-container">
<img src="https://www.dailydot.com/wp-content/uploads/2018/05/crush.jpg" class="btn btn-outline-danger btn-sm" alt="blabla" class="card-img-top" id="imgUNcover">
</div>
<div class="card-body">
<a href="#" class="card-title cardTitleLink">
<h1 class="cardTitleUN">
Some title
</h1>
</a>
<p class="card-text text-muted">blabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalbla
</p>
Continue Lendo
</div>
</div>
</div>
</div>
</div>
And the pen: https://codepen.io/magnusriga/pen/VGdxJy?editors=1100
Use the object-position and object-fit properties, to tweak how image is placed inside its block box.
Final Edit:
Here is an updated pen with some improvements to scrollbar etc.: https://codepen.io/magnusriga/pen/VGdxJy
I have a design which is that of rows consisting of two blocks.
http://jsfiddle.net/dhxr25m6/
<div class="homepageBlockRow">
<div class="homepageBlock">
<img src="http://s1059327.instanturl.net/images/HomeTiles/BigJob.jpg" alt="">
</div>
<div class="homepageBlock homepageBlockText orangeBackground" style="height: 372px;">
...
</div>
<div style="clear: both;"></div>
</div>
<div class="homepageBlockRow">
<div class="homepageBlock homepageBlockText greyBackground" style="height: 372px;">
...
</div>
<div class="homepageBlock">
<img src="http://s1059327.instanturl.net/images/HomeTiles/Rental.jpg" alt="">
</div>
<div style="clear: both;"></div>
</div>
The page looks good on a full size monitor but on tablet resolutions the images are about half the height as the text blocks.
I tried scaling up the text block to match the row height, but that doesn't work when the image is smaller.
What would be a good way to scale things so that the images and text are always the same height?
CSS3 has object-fit property that can achieve this (while retaining the aspect ratio).
Just add the following code to the css for the image:
width:100%;
height:100%;
object-fit:cover;
object-position: 0 0;
FYI, I changed the structure of the div definitions a bit and added some height/width/float attributes and you can see a demo here (fiddle doesn't seem to run my code for some reason as mentioned in the comments): object-fit-solution
RESPONSIVE DESIGN:
For mobile devices, you will need to write media queries.
Some pointers for that:
1) make the clearfix div to float to left
2) remove floats on image and text blocks. Also make the width to 100%.
I have this markup:
<div class="girls" style="text-align:center; margin-top:100px">
<img src="images/1.png" />
<img src="images/2.png" />
<img src="images/3.png" />
<img src="images/4.png" />
and this css (I'm using Twitter Bootstrap) :
img {
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
The images have equal width and height and are displayed inline.
On my resolution are ok, fit the entire width (1366px), but on lower resolutions the images don't fit.
So, I need to keep the proportions on every screen resolution ( lower than 1366px in my case)
I've found this picturefill
Which I think is helpful for me, but I'm thinking that it's a simpler solution for my case because I have 4 images which I need to display them horizontally and make them scale on every resolution.
Thanks!
You can set the style width attribute of the images to 25%, without specifying height. That's gonna work if you're always putting 4 images, they have the same width between them and your container div is always at 100%.
HTH
Francisco
If you are using Twitter Bootstrap, then use markup properly like in Twitter Bootstrap documentation:
<div class="row-fluid">
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div>
http://jsfiddle.net/zNLBG/
I have the following:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
</div>
By default, this div.span* spans the entire width of the screen, like this:
[x][x][x][x]
At a certain screen width, I want this to appear in a 2x2 grid, like this:
[x][x]
[x][x]
How do I do this?
Sorry about my earlier attempts, I did not fully understand your question:
The thing which you are trying with bootstrap is not really possible unless you go for your own #media selectors. There is a library called Neat. I think this is the example you are looking for.
EARLIER ATTEMPTS:
Try this, from here:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<div class="row-fluid">
<div class="span6">A</div>
<div class="span6">B</div>
</div>
<div class="row-fluid">
<div class="span6">C</div>
<div class="span6">D</div>
</div>
</div>
</div>
</div>
This should give you the following result:
[A][B]
[C][D]
Well that's a lot of divs. Not really sure if this can be made lighter.
The original question appears to be for an older edition of bootstrap.
Here's what solves the issue neatly in Bootstrap 3 markup. The key element is the clearfix div that affects xs and sm viewports [typical use case]. (sm not included in example below).
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
via getbootstrap.com
Here are 2 options that are responsive without the need for media queries. Resize the windows to see how they react.
CSS Columns:
http://jsfiddle.net/88t4L/
.row-fluid {
columns: 2 8em;
}
Here, the columns must be at least 8em wide, but if there's room for all of them to appear in a row, it will do so.
http://caniuse.com/#search=columns
CSS Flexbox:
http://jsfiddle.net/88t4L/1/
.row-fluid {
display: flex;
flex-flow: row wrap;
}
.row-fluid .span3 {
flex: 1 0 8em; /* grow equally, don't shrink, preferred width of 8em */
}
http://caniuse.com/#search=flexbox