I'm creating a website for a company and their photographer asks me what dimensions the pictures on the website are.
I work with CSS Bootstrap and grid system like:
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/xxxx-1-2.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3 style="height:5%;"> “text"”</h3>
</div>
</a>
</div>
</div>
So on the server the images had a size of 474 x 698 pixels, but the grid system crops the image a bit?
What size/dimension does the grid system use?
Thanks a lot
I think all you need is some css to make your images adopt to a screen of the device. A good practice, that I usually do, is to place this line of code inside my css.
img {
max-width: 100%;
}
Make sure it's at top of your first imported document, so you can override it with out any trouble in case you need some other image width.
PS. This rule should be in bootstrap, so check how you adding bootstrap to your webpage.
What you can do is add a css for this background image.
.fh5co-grid{
background-image: url(images/xxxx-1-2.jpg);
background-size: cover;
background-repeat: no-repeat;
}
If you want to make sure this code will get the full screen width, make sure your html col-lg-12 is wrapped on a container-fluid.
Related
I know this question must sound familiar, and I can see loads of people asking similar questions but none of the answers are working for me. Everyone has a fairly specific need. I want to understand the basics and I can work out the rest.
I have a simple angular/bootstrap web page. I have made a carousel component and I want to ensure the user always sees the entire image. I have seen lots of answers which suggest img-fluid, max-with, max-height etc., but nothing's working for me. It's sort-of working for landscape images but not for portrait images. I need it to always show the whole image regardless.
Here is the basic app component:
<app-nav-menu ></app-nav-menu>
<div style="padding:10px">
<router-outlet></router-outlet>
</div>
The router-outlet goes to this "about-us" component:
<div class="row">
<div class="col">
<app-carousel [slides]="slides"></app-carousel>
</div>
</div>
And the carousel component looks like this:
<div class="container">
<div class="row">
<div class="col">
<div>
<img [src]="slide.src">
<p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
{{slide.text}}
</p>
</div>
</div>
</div>
</div>
As you can see it's really simple. Right now there is no styling other than the little bit in the p tag which is to center the text in the image. This is not working properly now, because I think I've lost the container whilst trying out different solutions. I don't like CSS because I'm not used to them and I like to see the styles where they belong so I can understand better. But feel free to suggest a CSS solution if necessary.
So the question is simple: how can I make the image always fit the screen and not spill downwards?
Thanks
Did you try the object-fit property?
object-fit: cover;
If your image aspect ration is good, it shows the entire image.
object-fit: contain:
This shows the entire image, but if the aspect ratio is not good, it shows blank spaces around the image.
Thanks SureN.
I tried both of these but they didn't work. Perhaps they would do if I knew how to use them better.
In the end the following more or less worked for me, in the img tag:
style="max-width: 100%; max-height: 100vh; display: block; margin-left: auto; margin-right: auto;"
It's not perfect but it'll do for now!
I am trying to make a custom login page in bootstrap.
On the left hand side I want my image and on the right side I want my form, I need it to be responsive so on certain screen sizes the image may well need to disappear as I don't want it to become distorted.
The problem I am having it that the image is not showing fully but is instead getting "cut off" when the form ends.
Here my html
<div class="container-fluid">
<div class="row">
<div class="col-md-6 background_image">
</div>
<div class="col-md-6">
<!-- LOGIN FORM HERE -->
</div>
</div>
</div>
I have tried this CSS but to no avail.
.background_image{
background-image: url(/static/picture.jpg);
background-size: cover;
background-position: center center;
display: flex;
}
Here is an image to try and explain better:
image
How can I get it so that the entire left hand screen is filled up with my image?
You might need to set the height of the container. Not sure if it's nested in another container but either way maybe try:
<div class="container-fluid mh-100">
if you want/need it to be full height and using Bootstrap 4, if not another approach with CSS would be:
.container-fluid {
height:100vh;
}
Or set the height of the DIV with the image to whatever you need it to be
.background_image{
...
height:200px;
}
I want to add two images in a single row on my home page made using html css and bootstrap what should be the size of those images(in pixels). Please tell me how can I make those images responsive? Any help will be appreciated. Thanks.
Make 2 dividers in your HTML like:
<div class="row">
<div class="col-md-6 myfirstimageclass"></div>
<div class="col-md-6 mysecondimageclass"></div>
</div>
The class col-md-6 is a Bootstrap class, the other class myfirstimageclass is a self made class, place the images as background in your CSS and you are finished:
.myfirstimageclass{
background-image:url(yourfirstimageurl);
background-size:cover;
height:300px;
}
.mysecondimageclass{
background-image:url(yoursecondimageurl);
background-size:cover;
height:300px;
}
You should choose a reasonable size so they aren't huge is filesize.
Then use bootstrap's img-responsive class to make them response.
Here's a link to the bootstrap documentation for img-responsive.
So, I'm working on my first website with Twitter Bootstrap. Works great.
Now I'm trying to get the website responsive.
When I make the screen smaller(Too simulate a mobile phone screen), the logo gets bigger and bigger, until it gets too the smallest page size(I geuss?), then it jumps too a smaller size and it stays there.
Does anyone have an idea how to fix this? I want it too stay the same size...
HTML:
<div id="header" class="container">
<img id="logo" class="span2 offset1" src="img/logo.png" title="Hostellerie De Hamert">
<h1 id="deHamert" class="text-center span6">Hostellerie De Hamert</h1>
</div>
CSS:#logo{
background-color: transparent;
max-width: none;
}
And of course, bootstrap integrated.
You set the "span2" class on the image element. When using Bootstraps responsive library all "spans" will stack on top of each other instead of float from a certain screen width. I suggest you simply set the width and height of #logo to a static value.
http://jsfiddle.net/pC2xd/
Try removing the width: 100px; height: 100px to see what happens without these static values.
maybe you should try class='container-fluid'.
refer here: http://twitter.github.io/bootstrap/scaffolding.html#responsive
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.