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/
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/
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>
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 a block:
<section id="why">
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="img/image.png" alt="image">
</div>
</div>
</div>
.container have a margins of left and right, and i can't position image on left of body.
I need to pull image on left of body, and i need to make it responsive.
it looks like this
Give this a try.
You don't need the container, row or col divs.
<section id="why" class="text-left">
<img src="img/image.png" alt="image">
</section>
To make an img responsive use this:
<img src="..." class="img-responsive" alt="Responsive image">
The .container has a padding of 15px on each side. By using a tool like Chrome Inspector, you can see the styles that each div has.
If not inspector, try removing each div that you have, one at a time and seeing how each one works. The time it took to ask this question, you could have narrowed it down by simply experimenting.
The official website is more than useful, is very well-documented, and it will clear up a lot of things if you take a little bit to read through it.
http://getbootstrap.com/css/
give this a try
<div id="why" class="pull-left">
<img src="..." class="img-responsive">
</div>
you will now have a responsive image. But take note that the class img-responsive by default is display: block. if you want to resize the image, just set the width and height of the image.
CSS
.image {
height:50px;
}
HTML
<div class='span6'>
<img class='image' />
</div>
<div class='span6'>
<img class='image' />
</div>
Is it possible to cancel the style when the Bootstrap's responsive works?
I need these image to be displayed without crop by CSS, assuming that the picture's height is 400px.
Thank you
You need to surround the images with a maximum width that you wish them to be able to go. Preferably in percentage so that it scales on all devices.
Then add the class="img-responsive" to your image tags.
For example
<img src="/path/to/your/image/logo.png" class="img-responsive" alt="Something about the image">