I have an image (currently 1305 x 352 pixels) inside of a fluid-container like so:
<div class="container-fluid" id="lion-div">
<div class="row-fluid">
<img src="image.png" class="img-responsive"></img>
</div>
</div>
When the page width is at or smaller than the width of the image, the image scales to the full width of the page, which is what I want.
However, when the page width is larger, the image stays aligned to the left. I'd like it to stay in the middle of the page.
I've tried using margin-left and margin-right: auto on the div, even making a media container with min-width: 1306px and trying everything I know, but I can't get the image to center. Any ideas?
try this:
.row-fluid{text-align:center;}
.img-responsive{margin:0 auto}
Related
Suppose I want an image to be centered within a div. The div takes up the entire width of the screen (either w-100 or mw-100), and only a portion of the height. The image resizes to the browser window.
Is there a way I can set the percent scale of the image, while having it be centered? I've tried mx-auto, my-auto, and img-fluid. This works to center the image when resizing the window, but this takes up the entire div. I want more of the background showing (eg. to allow a color to surround the image).
Is there a way I can either:
Set the % scale of the image (eg. 500x200 -> 250x100) while keeping it to the center of the div
or
Enlarge the div background
Example code:
<div className="w-100" style={{backgroundColor: "red"}}>
<img src="img.jpg" className="img-fluid mx-auto my-auto d-block" />
</div>
I have tried setting the height and max-height in both the div and image, but to no avail.
edit:
Picture for clarification:
Suppose the entire rectangle is the webpage. The green section is the div where I want the picture. The bright red square is the picture itself. What I want, simply, is to be able to scale the image and have it stay centered within the div (right side shows this). I would also like dynamic resizing if the browser window is changed.
You can insert a screenshot of your problem which will make us understand the problem you are facing in more easier way.
What I am understanding is that you want your red background to show while resizing the screen so you can add className w-75 to your <img> tag so it will help in showing your background while resizing the screen and your img will always remain at center.
<div className="w-100" style={{backgroundColor: "red"}}>
<img src="img.jpg" className="img-fluid mx-auto my-auto d-block w-75" />
JSFIDDILE LINK
Did you tried using
width: fit-content;
By adding this property to child element, it will acquire full space as parent element.
https://caniuse.com/?search=fit-content
I am trying to make 2 columns with an image in each and although the 2 images are the exact same size, I noticed that they have uneven right/left margins, the left one is slightly larger, how can I fix this?
HTML:
<div class="container">
<div class="row">
<div class="col col-lg-6">
<img src="logo.jpg">
</div>
<div class="col col-lg-6">
<img src="profile.jpg">
</div>
</div>
</div>
CSS:
.container img {
width: 35em;
height: 35em;
}
It is because you have applied width to the img tag. you can fix this by setting the width to 100%.
when image size is larger than the width of the div image overflow. And the div tag that contain the img tag, have left and right padding. if the image's width is larger than div width image will overflow. and even if you set overflow to hidden image will show to the innerWidth of the div.
Making the img width 100% will make the image remain in the div.
Hope this solves your problem.
Since I don't have enough reputation to comment, I will answer your question that you asked in the comment section below HasithaC's answer.
First of all, like what HasithaC said, give your image a width: 100% so that the image will remain in the div.
You mentioned in the comment that the images don't stack on top of each other when resized. It's because you inserted col alongside with col-lg-6. col-lg-6 stands for "column-large-6", which will create 6 columns layout when the screen size is 992px or above. If the col classes weren't alongside with col-lg-6 in the first place, the images (columns to be exact) will stack on top of each other when the screen size is below 992px,1 but the col class is there, so it will then take over to style your div when the screen size is 992px below as col-lg-6 is meant for 992px or above. Moreover, col has a flex-grow: 1. According to CSS-Trick:
This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children.
You have two col in the same row and both of them have flex-grow: 1, so they will have the same width, but they won't stack on top of each other because there are no media queries controlling it, unlike col-lg-6 which is only meant for screen size 992px or above. Remove col will solve the problem.
Jsfiddle example
I'm trying to figure out how to make an element fit (like object-fit) into another div.
That specific element is an Image Container (div.ratio-box), which has a intrinsic aspect ratio css (the padding bottom hack to avoid page jump).
The problem is that with portrait image, the Image Container (div.ratio-box) is overflowing the parent (div.slide-cell) . So what I want to do is to calculate a new width base for (div.slide-cell.portrait) on the following known value:
Img Height,
Img Width,
Parent's width
Parent's margin from the browser window
https://jsfiddle.net/5d6zrueh/3/
<div id="slider">
<div class="flickity-viewport">
<div class="flickity-slider">
<div class="slide-cell portrait is-selected">
<div class="ratio-box centered" style="padding-bottom:150.06002401%;">
<img src="http://via.placeholder.com/166x250">
</div>
</div>
</div>
</div>
Hope it makes sense to you.
I'm using Materialize framework and I'm interested in the Cards component (The small version).
The code goes like: (the small class limits the height of the card to 300px)
<div class="card small">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
Here's what I want to achieve:
The image must be in the center of its parent
If the image has a width that's smaller that the cards width, then it should be used with it's full width in the card
If it's larger than the cards width then it should be cropped to fit the card
It should be responsive (using responsive-img class)
The image must be in the center of its parent
This can be achieved by applying margin: 0 auto; to .card-image and setting a max-width that is smaller than the max-width of .card.
If the image has a width that's smaller that the cards width, then it
should be used with it's full width in the card
Does this mean the image should not be larger than its original size? If so the demo below should fulfill the criteria. .card-image is set to have a max-width of 400px and .responsive-img has a width of 350px.
If it's larger than the cards width then it should be cropped to fit
the card
This can be achieved by setting overflow: hidden; to .card-image.
It should be responsive (using responsive-img class)
The demo below uses .responsive-img on the image. To center the image even when it's cropped, you may set top, bottom, left, right values to -100% and margin to auto. Be sure to set .card-image to position relative and .responsive-img to absolute.
Here's a demo:
https://jsfiddle.net/suefeng/updr2ehp/1/
If you resize the window, the image should crop when the window is narrower. The image is 350x300px.
Linked a jsFiddle with examples. Hope this helps.
If it's larger than the cards width then it should be cropped to fit the card
When you specify the card-small, the height will be constrained. To modify the width, you just need to specify the number of columns to use.
<div class="col s6">
If the image has a width that's smaller that the cards width, then it should be used with it's full width in the card
Some images that are too small will be distorted, see the third example with a jpg in the jsFiddle.
It should be responsive (using responsive-img class)
The responsive features baked into Materialize should provide you with some features, for example in second card.
<img src="any.jpg" alt="" class="circle responsive-img">
I have two divs side by side. The first is fixed width with an image. The second is variable width with text (variable over a range 150-770). I need the second div to resize on browser resize so that it can shrink from 750 to 150, the text inside will wrap during resize, and the divs stay side by side down to 300+150. However, when the browser goes below 300+150 in width, the second div will drop down under the first. After hours of chasing my own tail with css, I can achieve some of that, but not all of it at once (e.g. I can do all of that but not get the second div to drop down or I can get it all except the text won't word wrap between size 150 and 750). Thanks.
<div>
<div style="float:left; width: 300px; ">
<img src="image.jpg" style="width: 100%;">
</div>
<div style="float:left; min-width:150px; max-width: 750px;">
some text here that should wrap on resize between 300 and 750.
if the browser window get below 300+150, this div will
drop below the previous div.
</div>
<div style="clear: both;"></div>
</div>
If you resize the page the div will resize with it and on load of the page.
$(window).on('load resize', function(){
$('#div').width($(this).width());
});
and to make them float next to each other try this css:
display: inline;
postion: relative;
float: left;
You should use #media css queries to make it responsive.
This link: http://css-tricks.com/logic-in-media-queries/ may help to explain #media queries.
What you want to do is make each 100% width at mobile size.