am making a card where i have the image and description below but the image is too zoomed and doesnt look attractive i've tried to adjust the height and image but it doesnt work
HTML
<div id="event-card">
<div id="card-image">
<img src="{{ URL::to('/assets/photos/event3.jpg') }}">
</div>
<div class="container" id="card-details">
{{$event->eventName}}
</div>
</div>
This is the CSS
#event-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
display: inline-block;
width:250px;
height:250px;
overflow: hidden;
margin-right:10px;
margin-bottom:10px;
border-radius: 8px;
margin-top:40px;
}
#card-image {
background-image:url('/churchill/public/assets/photos/event3.jpg');
height:60%;
width: 100%;
background-size:cover;
overflow:hidden;
background-repeat: no-repeat;
}
#event-cards{
width:80%;
margin-left:156px;
}
All well.. images.. biggest problem ever :D
Well you actually have few options.
I will be straightforward
img {
width: 100%;
height: 100%;
object-fit: cover;
}
This will make image look natural and not stretched but it might cut it on sides for that
img {
max-width: 100%;
height: auto;
}
This might be best solution for you. Image won't go over parent in width and it will go in height big enough to keep its aspect ratio and it will look natural. Play with it and see what looks best for you
PS: You also have
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: scale-down;
object-fit: none;
What is the original width and height of the image?
if the image height 500px and the width 500px and you set it width 500px and height 200px it will cause a problem like you facing, to avoid this issue you can set the image as a background you can create another div with the height and width you want and set this image as a background and you can control it using background-size:cover and background-position
Related
I have an image that is e.g. 1000x1000 px. I want to insert it into my web page so that it has 500x300 px. I do not want that it is distorted though. I want it to be zoomed down to 50% of its width (so 500x500 without distorting) and then cropped for 300 in height (i.e. 300 px of the image would be displayed from the top of the image of those 500 px).
I am trying to use a normal img tag but if CSS is needed that is ok too.
Thanks.
You can put the image inside div,
and set the div height, width and overflow hidden;
<div style="width: 500px; height: 300px; overflow: hidden;">
<img src="./1.jpg" alt="" style="width:100%;" >
</div>
Create a div that is 500x300 px in size and set your image as the background image to that div, with its size being cover and position being top.
HTML:
<div id="my-image"></div>
CSS:
#my-image {
width: 500px;
height: 300px;
background: url(your-image-location.jpg);
background-size: cover;
background-position: top;
}
Here's some examples. I think what you want would be #example3. On the other hand, you can also see this working example :)
.fit-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: contain;
background-repeat: no-repeat;
}
.resize-image {
height: 500px;
width: auto;
}
.crop-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: cover;
}
<h3>Make the image adapt to the size of the div </h3>
<div id="example1" class="fit-image">
</div>
<h3>Resize an image</h3>
<div id="example2">
<img src="https://via.placeholder.com/1000x1000" class="resize-image" />
</div>
<h3>Crop the image</h3>
<div id="example3" class="crop-image">
</div>
You can achieve this using the following two methods:
Method 1: with CSS and background-image
Ditch the img tag and put your desired image in the background-image property of a div like:
width:500px;
height:300px;
background-image:url('http://unsplash.it/1000/1000');
background-size: cover;
background-position:center;
You can see the working code here.
Method 2: using position:absolute
Put your img tag inside a div and crop out the rest of it using overflow:hidden like:
div{
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
div img{
width:100%;
height: auto;
position:absolute;
left:0;
top: calc(50% - 250px);
}
And the working code.
You should add position,left and top if you want your picture to be vertically centered in the div.
I want to give background size as 636px and 1140px to background image instead of div. as I don't want the scroll of div because of its height.
If I give height and width to the parent div then I get background-image but when i give to background-size then it doesn't work.
.custom_app_phone_div {
margin: 5% auto 0 auto;
height:auto;
width:auto;
}
.custom_app_phone_div .custom_app_phone_bg_image_div {
background: url("http://i.imgur.com/jIE5Bf7.png") no-repeat;
background-position-x: center;
background-size:636px 1140px;;
width: 100%;
height: 100%;
padding: 10px;
}
<div class="custom_app_phone_div">
<div class="custom_app_phone_bg_image_div">
</div>
</div>
Any help would be great.
Thank you.
If not defined the div's height will be determined by the content's height.
What you could do is set the min-heigh property.
I'm not sure what you are asking for. But if you want to change the background image size without changing the div size you should either use an image <img/> or use a helper div as background (see example below).
Now, if you want to get rid of the scrolling bar you can set the parent container .custom_app_phone_div a height/width and set overflow: hidden.
Can you try this and let us know if this works for you?
.custom_app_phone_div {
margin: 5% auto 0 auto;
height:auto;
width:auto;
}
.custom_app_phone_div .bgHelper{
background: url("http://i.imgur.com/jIE5Bf7.png") no-repeat;
background-position-x: center;
background-size: contain;
height: 1140px;
width: 636px;
}
.custom_app_phone_div .custom_app_phone_bg_image_div {
}
<div class="custom_app_phone_div">
<div class="bgHelper"></div>
<div class="custom_app_phone_bg_image_div">
</div>
</div>
Set the size of background images to 636px x 1140px using any image editor and then use:
background: url("http://i.imgur.com/jIE5Bf7.png") center no-repeat;
Working fiddle here
I am trying to build a simple fluid image that can resize based on screen size.
But I am having trouble to get the image smaller when the width of the browser gets smaller.
HTML:
<main>
<section class="slider-ctn">
<figure class="logo"></figure>
</section>
</main>
CSS:
.slider-ctn figure.logo {
margin: auto;
background-image: url('../Images/logo.200x100.png');
width: 200px;
height: 100px;
}
If you set the background-size to 100% 100% or cover the image will stretch to fit the container. Remove the width (or restrict the width by setting the parent's width) and set height: 0; padding-top: 50% on the figure to make the height of the figure half of the width, so the aspect ratio will match the image and be fluid.
* {margin:0;padding:0;}
.slider-ctn {
margin: auto;
width: 200px;
}
.slider-ctn figure.logo {
background: url('https://dummyimage.com/200x100/000/fff') top left no-repeat;
height: 0;
background-size: cover;
padding-top: 50%;
}
<main>
<section class="slider-ctn">
<figure class="logo"></figure>
</section>
</main>
Just add the following to your head tag with this code :
<meta name="viewport" content="width=device-width, initial-scale=1">
Another option using vw units and contain.
If you know the aspect ratio of your image you can use vw (view width) as your units for width and height.
I am using an image that has a 4x3 aspect ratio. If I want the width to always be 80% of the screen I will use 80vw. Then, my height will be 3/4 of my width, or 60vw.
Then be sure to use contain for your background sizing.
Try this css and see if it satisfies your needs:
.slider-ctn figure.logo {
margin: auto;
background-image: url('https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 80vw;
height: 60vw;
border: 5px solid red;
}
You should add contain as background-size to your CSS:
.slider-ctn figure.logo {
margin: auto;
background-image: url('../Images/logo.200x100.png');
background-position:center center;
background-repeat:no-repeat;
background-size:contain;
width: 200px;
max-width:100%;
height: 100px;
display:inline-block;
}
Don't forgot to add position and repeat to background properties everytime when you use background images.
Also I added max-width to fit within the parent container if it is smaller than the logo container.
Example here
NOTE: Don't use cover in background-size because that will cut your
logo to fit only within width limits, contain will fit width and
height.
I think setting up the max-width of the image to 100% should do the trick.
.slider-ctn figure.logo {
background-image: url('../Images/logo.200x100.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
width: 200px;
height: 100px;
}
How could I use img-responsive of bootstrap to a div as follows:
<div class="fill" style="background-image:url
('./images/abc.jpg');">
</div>
While I am trying to add img-responsive class inside the div along fill it doesn't work. How could I make the background image for the above div responsive?
div {
background-image:url('./images/abc.jpg');
background-repeat:no-repeat;
background-size:contain;
}
If the background-size property is set to "contain", the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image's width and height):
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
If the background-size property is set to "cover", the background image will scale to cover the entire content area. Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be clipped:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Look, there is a nice technique using background-size property
.fill {
background: url(path/to/img.jpg) center center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
This rule will make your background image cover all container space and adjust when scaling the window.
Use background-size property to the value of 100% auto to achieve what you are looking for.
For instance,
.fill{
background-size:100% auto;
}
I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.
How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>
Change the CSS for your #bod selector to the following:
#bod {
border-radius: 105px 105px 0px 0px;
border: 5px ridge blue;
height: 300px;
width: 300px;
float: right;
overflow: hidden;
background-image: url("smile.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Just to be clear, I've removed the background-attachment attribute from the style definition and changed the value of the background-size attribute to cover, which is the important part.
Update
You've previously set the image through your CSS by setting the background-image to url("smile.jpg") in the #bod styling. I'm guessing that line isn't needed anymore since you're now setting the image in your HTML with: <img src="http://lorempixel.com/800/500" /> instead.
That image is now off-center, to fix that change your #pic styling to the following:
#pic {
float: right;
transform: rotate(90deg);
transform-origin: 50% 50%;
height: 100%;
width: 100%;
}
I've added the transform-origin, width and height attributes to the #pic styling.
The center of rotation is middle of div, so you have to make sure that the center is in the right place. You should just do this:
#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}
https://jsfiddle.net/ebc5yjzu/3/