The images display one atop another, not in a horizontal line, no idea why.
Just need them to align horizontally.....
HTML
<div id="detail_image_wrapper">
<div class="detail_images">
<img id="left_detail" src="images/LeftDetailImg.png" alt="Phone image">
</div>
<div class="detail_images">
<img id="centre_detail" src="images/CentreDetailImg.png" alt="Phone image">
</div>
<div class="detail_images">
<img id="right_detail" src="images/RightDetailImg.png" alt="Phone image">
</div>
</div>
CSS
div.detail_images {
width: 203px;
vertical-align: top;
display: inline-block;
}
You need to add a width property to the images, not just the image container. Otherwise the images will not resize to fit into their container and they will overflow it, causing them to overlap. Example: JSFiddle
Add this to your CSS:
.detail_images img {
width: 203px;
}
You can adjust the width of the images as needed.
Related
I am trying to use CSS3 flexbox to align three images horizontally while responsively changing the width of the picture being displayed. It needs to dynamically resize and center on a mobile device. I have found several related questions.
I have come up with two incomplete approaches as follows:
This works to align them horizontally, but the issue is one of the images has a different height and I am not sure how to make it auto-size. I want that image to preserve its ratio but take up the same with. I also don't know what approach to take to make it center all the images on mobile, other than using a media query and having it float:center. In practice I couldn't get that to work.
My other idea was to create an image grid of sorts. I couldn't figure out how to get them to align correctly, even on desktop. I would want the individual ration of the images to be preserved, but have them take up 1/3 of the window width and resize the image as necessary dependent on the window width. Once it reaches 480px width, center the images with each the same width but still preserving its individual proportion.
With object-fit and flex-aligning the elements to the elements to center, you can have them all aligned no matter the image ration, then for mobile it would be only matter of changing the flex-item width to 50%, 100%, or whatever you want with #media query
*{
box-sizing: border-box ;
}
.flex-container {
background: darkred;
flex-direction:row;
display: flex;
align-items: center;
width: 100%;
flex-flow: row wrap;
}
.flex-item {
padding: 20px;
width: 33.33%;
order: 1;
}
.flex-item img{
max-width: 100%;
object-fit: contain;
}
<div class="flex-container">
<div class="flex-item">
<img src="https://alumni.csum.edu/image/content/emails/TellMeSomethingGood.png" alt="">
</div>
<div class="flex-item">
<img src="https://kyuyoungshipperindo.files.wordpress.com/2014/06/something.jpg" alt="">
</div>
<div class="flex-item">
<img src="https://alumni.csum.edu/image/content/emails/TellMeSomethingGood.png" alt="">
</div>
<div class="flex-item">
<img src="https://kyuyoungshipperindo.files.wordpress.com/2014/06/something.jpg" alt="">
</div>
<div class="flex-item">
<img src="https://kyuyoungshipperindo.files.wordpress.com/2014/06/something.jpg" alt="">
</div>
<div class="flex-item">
<img src="http://www.sypte.co.uk/uploadedImages/Media/Press_Releases/see%20something.JPG" alt="">
</div>
<div class="flex-item">
<img src="https://alumni.csum.edu/image/content/emails/TellMeSomethingGood.png" alt="">
</div>
<div class="flex-item">
<img src="http://www.sypte.co.uk/uploadedImages/Media/Press_Releases/see%20something.JPG" alt="">
</div>
</div>
There are a set of 3 images which align below each other (display:block) for screens less than 768 px. Now for screens of a larger size, the images should be displayed inline-block with text below them(centered), and they should resize themselves responsively on the same horizontal level, as the browser window resizes.
Now, here's what I have tried with the following results:
Trial 1:
HTML:
<div class="row container-fluid rowimg" id="row4">
<div class="conatiner-fluid col-sm-12 images">
<div class="conatiner-fluid col-sm-4 smcar">
<figure class="carimg">
<img src="images/Small Car.jpg" class="media-object pull-left" alt="Small Car">
<figcaption>Car 1</figcaption>
</figure>
</div>
<div class="conatiner-fluid col-sm-4 fmlcar">
<figure class="carimg">
<img src="images/Family Car.jpg" class="media-object pull-left" alt="Family Car">
<figcaption>Car 2</figcaption>
</figure>
</div>
<div class="conatiner-fluid col-sm-4 medcar">
<figure class=" carimg">
<img src="images/Medium Car.jpg" class="media-object pull-left" alt="Medium Car">
<figcaption>Car 3</figcaption>
</figure>
</div>
</div>
CSS:
#media (min-width: 768px) {
#row4{
border: 1px dotted red;
margin:0;
padding:0;
text-align:center;
}
figure {
display: inline-block;
border: 1px dotted gray;
padding:0;
margin:0;
vertical-align: bottom;
}
figure img {
vertical-align: bottom;
display:inline-block;
}
figure figcaption {
border: 1px dotted green;
text-align: center;
display:inline-block;
vertical-align: bottom;
}
}
The result is div's overlapping each other:
Trial 2:
Upon adding 'img-responsive' in the image's class, the images resize well, but the middle image floats up, even with vertical-align: bottom. It doesn't' matter whether I include ""media-object pull-left " or not. I am getting the following result:
Now I have tried various versions of these since the last 24 hours(that's why the separate classes for each image div), read numerous SO posts, added float, cleared floats, used relative and absolute positioning, with bottom:0 (that put my images on same line, but images were not behaving in a responsive manner). Also, I don't get why there are the extra spaces between the container and the content-div's. I did explicitly set margin and padding to 0. The middle image has gone up, and it has gone down, but it refuses to line up. The images have overflown the div, and they have shrunk too much. I have even tried resizing the images to have the same height, (but why should I do that in a responsive design?).
For the life of me, please help me figure this out.
just use structure like this:
<div class="row">
<div class="col-xs-12 col-sm-4">
img, text...
</div>
<div class="col-xs-12 col-sm-4">
img, text...
</div>
<div class="col-xs-12 col-sm-4">
img, text...
</div>
</div>
col-xs-12 used for display element with 100% width on screens <768px. col-sm-4 for 33% width on screens >768px.
Read this for better understanding: Bootstrap grid system
Set the same height property for image containers, overflow: hidden, text-align: center; and set 100% height on img element. So you will get images of the same height and cropped on sides.
I need to make a logo in my footer responsive, and it should be centered. I thought I could solve it the following way with bootstrap:
HTML
<!-- Footer -->
<div class="container-fluid">
<div class="row">
<div class="landing img-responsive footer">
<div>
<img src="~/img/logo-white-small.png" />
</div>
</div>
</div>
</div>
CSS
.landing.img-responsive.footer {
margin: 0 auto;
}
But is that incorrect?
I would suggest you to use
<center><img src="~/img/logo-white-small.png" /></center>
or alternatively
<div style="text-align:center" class="img-responsive">
<img src="~/img/logo-white-small.png" />
</div>
Also check the space between .landing .img-responsive .footer between these classes in you css.
You can use:
img {
display: table;
margin: auto;
}
To center the image, while adding the .img-responsive class part of bootstrap to make it responsive.
https://jsfiddle.net/c79bstuu/
User img-responsive class for responsive image.
Use center-block class to horizontallyalign an element center.
<img src="~/img/logo-white-small.png" class="img-responsive center-block" />
it will make your image responsive as well as horizontally center aligned.
anyhow if you want vertically align then you should use display: table-cell for child div and display:table for parent div. You also need to remove float property from child div.
I'm trying to line up three pictures within a bootstrap grid. All of the images were centered, which is what I'm trying to, before I added a img-responsive class to one of the images. I do however want the images to be responsive while also making them a tiny bit larger than they are already. Tried numerous things such as "width: 200%;" however without success
How it looks
I created a "center-all" class within my css that should center all the three of them, and it did work, just until I added the img-responsive class to the red one. The class was not added to any of the other images.
.center-all {
text-align: center;
align-items: center;
align-content: center
vertical-align: center;
}
JSFiddle
https://jsfiddle.net/8a6ee7f5/
Images doesn't work in Fiddle ofc.
What I want to achieve:
I want the images to be 2 times larger than what they currently are and I want them to be responsive while still keeping them centered.
Thanks in advance!
I found the answer to my question(s).
When adding the img-responsive class to the image it moves to the left. By adding "center-block" to the class to the image it should stay in the center.
<img src="..." class="img-responsive center-block">
Now I just need to find the answer on how to upscale my pictures to 200%.
EDIT:
I found the following to upscale my images:
CSS
.wrapper {
width: 40%;
}
and added that to my image class.
HTML
<img src="..." class="img-responsive center-block wrapper">
And that fixed it.
So bootstrap already has an element centering class called .text-center you can just add this class to the row wrapping your items and everything in that row will be centered. Then instead of using .img-responsive you can add a width to the image instead or give the image a percentage width. It will maybe look something like the following hopefully this is what you are looking for:
Here is a fiddle Updated Fiddle
note: I have added a border-radius of 50% to your images because I assume you want them to be round. If you want to use 100px you can change it back.
Css:
#values img{
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
width: 80%;
}
#val1 {
background-color: #792c24;
}
#val2 {
background-color: #4f5e6d;
}
#val3 {
background-color: #665e25;
}
Html:
<div class="container" id="values">
<h3 class="fancy">Values</h3>
<div class="row text-center">
<div class="col-sm-4">
<h4>Independent</h4>
<img id="val1" src="http://placehold.it/300x300">
</div>
<div class="col-sm-4">
<h4>Team Player</h4>
<img id="val2" src="http://placehold.it/300x300">
</div>
<div class="col-sm-4">
<h4>Dedicate</h4>
<img id="val3" src="http://placehold.it/300x300">
</div>
</div>
</div>
I have div which includes:
<div class="field-content">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
In some cases this field-content has not img-tag at all. Then I want tile_content to be vertically centered to field-content.
When img-tag exists then image is positioned at top of field-content and tile_content is under image.
This demonstrates those two situations. In first one there is image and under image tile_content. In second one there is only tile_content - no img at all.
Any ideas/tips how to make this work?
My CSS:
.field-content {
margin: 0px 0px 15px;
height: 365px;
width: 320px;
display: block;
overflow: hidden;
float: left;
background-color: #FFF;
.tile_content {
}
The only Thing you Need to know is vertical centering of div. This Problem is already solved here:
How to vertically center a div for all browsers?
You can add class has-image to .field-content do you can define own Styles for block with Image and without it. For example:
<div class="field-content has-image">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
So your CSS Looks like
.field-content.has-image {
}
If I got your question correct, then simply,
Put that img tag inside a div, give that div the same height as that you have given for image, so, it won't matter if the image is inside that div or not. it will always appear as a block, so won't collapse
OK, first time, I took it other way, I thought there are 3 divs, Sorry for that.
Here is the fiddle link:
enter code here
http://jsfiddle.net/happy2deepak/6U3kw/1/