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
Related
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 created a gallery with grid layout having cells with size 285x285 pixels.
I need to populate the gallery with images of diverse dimensions, including: 285x285, 290x285, 100x200, 500x800 and so on.
My gallery is supposed to work as follow:
if the image is bigger than 285x285, get the center-top portion of it
with size 285x285
if the image is smaller than 285x285, stretch the
SMALLER dimension to 285px and get the center-top portion of it with size 285x285, but keep the original image ratio
This way, I want to fill up the entire cell space with no white holes in the grid, except for some margin between cells (5px right and 5px bottom).
I tried the following css:
.imagegallery {
padding: 2px !important;
background-position:50% 10%;
background-repeat: no-repeat;
min-height:285px;
min-width:285px;
max-height:285px;
max-width:285px;
margin-right:5px;
margin-bottom:5px;
}
However, the results is the following:
if image is larger than 285x285, I correctly get the portion of the image I want (center top)
if the image is smaller than 285x285, the LARGER dimension is stretched to 285px and the original image ratio is kept
This way, sometimes I get some white space around the images that are smaller than 285x285 in at least one dimension.
How do I fill up the white space via css?
====UPDATE====
I am using Bootstrap.
HTML example:
<div class="row">
<div class="col-md-3 col-sm-2 col-xs-1 portfolio-item img-list imagegallery"
style="background-image:url('./images/img.jpg');>
</div>
</div>
</div>
background-image:url is in style, rather than class, as the image name is built via AngularJS.
For the updated html, use the "background-size" property. With browser prefixes, this is probably the best CSS-Only solution. Also, you are missing a closing quotation for your "style" attribute.
https://css-tricks.com/perfect-full-page-background-image/
You can use CSS object-fit:cover property. This will cover the image area proportionately without stretching smaller dimensions.
Reference: https://css-tricks.com/almanac/properties/o/object-fit/
I need to create a row for a front page (like a slider) with an image where there is a man and behind him is a gradient.
the image is as it is, centered in container (width 1170px) and that works fine but i need to make a row behind the image to go full 100% for larger resolutions. I am using bootstrap 3.
The way I see it, the background 'row' div should have a dark color from left to center, and from center white color should go to the right.
I dont believe a gradient on row should work because of the resizing hm?
I cant find any similar websites that have this.
Is there a better solution?
<div class="row">
<div class="col-md-12">
<div class="container" id="slider">
</div>
</div>
</div>
#slider {
background: url('image.jpg');
height: 550px;
}
For this kind of Design normally we remove left portion if it's not necessary. Otherwise we need to make display block both div left and right.
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}
I'm taking a crack at writing a Javascript-based image gallery. Right now I have the code set so that I know the images will all be at the same height, but...
How can I arrange my markup and CSS so that all of the images will display on just one line, and when a new one would be outside the width of the browser window, the parts of the image that are 'out of bounds' are simply hidden and don't display on the next line?
I've been experimenting with overflow, float, and display in various ways for the images themselves and their container div to no avail. There must be something simple I'm overlooking here.
Right now the markup looks like:
<div id="slider">
<img src="img1.png" />
<img src="img2.png" />
<img src="img3.png" />
</div>
How should I style this so it displays on one line, even if the combined width of the images is greater than the width of the browser window?
Thanks.
#slider {
white-space: nowrap;
overflow : hidden;
width : 100%
}