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/
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'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 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'm looking for a solution of my problem.
I am using twitter bootstrap for a mobile site and this is my outcome on mobile view:
<div class="row">
<div class="span4">
<div class="visible-phone" style="background-image: url('http://upload.tapcrowd.com/upload/catalogimages/719/catalogimagecardealer#2x.png');></div>
<p class="metadataTitle metacell">
<span style="display: inline-block" class="ellipsis">Car Dealers</span>
<span style="table-row"></span></p>
</div>
</div>
</div>
The css of the div where my image is in:
background-size:contain;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 300px;"
But as you can see there is a margin between the image and the content below, does anyone know how I can fix this?
background-size:contain;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
"contain: This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area."
So your image has been scaled so that it fits into the element completely - you seem to want to use cover instead:
"cover: This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area."
Set margin:0; padding:0; to both the image and the content below. This will remove any margin. Since HTML adds a margin by default, you need to explicitly tell HTML to remove a margin.
I'm using Twitter's Bootstrap fluid layout. This is a snippet of my code
<div class="hero-unit" style="background-image:url('images/ball on sand.JPG'); background-size:100%;">
<h1>Pelican Volleyball</h1>
<p>The northshore's premiere outdoor volleyball organization</p>
<p>Learn more ยป</p>
</div>
If I make my window too narrow, the image "ball on sand" will repeat. I just want the height of my image to stretch to fit entirely in the hero-unit div. How do I do this?
Try background-repeat: no-repeat and background-size: cover
You can try background-size:cover
From MDN
cover
This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.