I am trying to crop the image using display and justify-content in CSS as per the screen size. The image look like below, between the vector header and start of the image some padding is there. This image looks fine when it is displaying in the desktop based screen, but in mobile based screen it is not displaying fine. I am using the below CSS to crop the image in my web page.
Image Looks
CSS Code
.container {
width: 100%;
height: 68px;
overflow: hidden;
display: flex;
justify-content: left;
position: sticky;
position: -webkit-sticky;
}
HTML code
<div class="container">
<img src="/header.png">
</div>
After cropping the image using CSS, the image look like below
But I also want to crop in the beginning of Vector Header based on the screen size like below. Is there is any way in CSS to do this with the existing CSS code.
Thanks in advance for your suggestion and advice.
Try background-position property
#header {
background-image: url('https://i.stack.imgur.com/9RIPB.png');
background-position: -30px 0px;
width: 200px;
height: 100px;
}
<img id="header" />
Related
I want to have something like facebook cover, I came across this jsfiddle in this community.
.cover { width: 100%; height: 180px; overflow: hidden; background-color: black; }
.cover > img { position: relative; width: 100%; top: 50%; margin-top: -50%; }
But there is a problem when I see the cover image in the responsive mode the image re-adjusts itself! i.e in desktop mode in the bycycle driver's head does not show, but in other small device modes the driver's head is visible.
Question:
How can I make a constant & responsive cover image like facebook?
P.S: Please note that the user will modify the cover image view point just like what facebook does!
You can try using a background-image instead, so you can set:
background-size: cover;
background-position: center;
This would stretch the image to fill the entire element without losing ratio.
See the Updated Fiddle
I am trying to put an image in my header and it must auto position it self when the window is resized and the header image must support different screen resolutions.
This is what I have so far:
HTML
<header>
<img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
</header>
CSS
.thumbnail2 {
display: block;
max-width: 123%;
height: auto;
width: auto;
}
header {
padding: 0px 250px 0px;
margin: 0 auto;
}
The reason my max width is 123% is to fit the image when in full screen but as soon I resize the window it does not resize itself and the image becomes smaller in width.
Please assist.
I understand the thought process behind your current code however, you are approaching the issue all wrong. You should be using a css media query to adjust your your header if you are looking for granular control depending on screen size.
Since you only have one image and have not included the dimensions of the image or where it should appear in the header, i will assume you want it to be the entire width of the header.
Additionally max-width should never be over 100%. Here is how I would restructure your code:
Note: if this does not fix your issue, you need to resize your image to be larger. If your image is to small it will not fill up the entire screen.
Codepen link
html:
<header>
<img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
</header>
CSS:
.thumbnail {
display:block;
/* set width to 100% */
max-width: 100%;
height: auto;
width: auto;
}
header {
/* padding:0px 250px 0px; */
padding-bottom: 250px;
margin: 0;
/* set width of the header to 100% */
width: 100%
}
Try put the image inside the css (not an img tag)
.thumbnail{
background-image : url(MyImage.jpg);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
then it would auto adjust to the container .thumbnail width...
You could use JavaScript to dynamically adjust the image size with
the window size:
Auto image resize based on browser window dimensions
You could use Media Queries and select multiple points at which your header adjusts it's size: Resizing images using media queries
You could instead create a "banner" class that utilizes the "backgrounds" family of CSS properties: http://www.w3schools.com/css/css_background.asp
Try changing your code to something like this:
<style>
.thumbnail2 {
position: relative;
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url("./path/to/image");
min-height: 100%;
}
</style>
<div class="thumbnail2"></div>
You can edit the height of the image shown with min-height, and the width should be responsive.
I am trying to add a fixed element to the bottom right corner of my webpage, which I have done with success.
I have also limited it's width with max-width: 30%; so in mobile devices it does not show the image too big. What I want to do now is to adjust the image by screen height as well. Is there anything else to figure this out except for Media Queries?
HTML:
<div id="cornerImg">
<a href="my-site-link-here">
<img src="image/source.jpg" />
</a>
</div>
CSS:
#cornerImg {
position: fixed;
bottom: 0;
right: 0;
max-width: 30%; /* Already working as expected */
max-height: 30%; /* Adjusts the visible part of the image, but overflowing */
}
So I get the image resized on the screen, but it does not actually change the size of the image when it goes under the max-height condition. It just shows the top of the image and leaves the rest of the image invisible.
I know how to make this as Media Query, but I am seeking for a non-MQ solution here, if it is possible in any form. Thank you in advance!
EDIT: If any Media Query solutions come up, please provide some advice on that as well. It seems that even though I can adjust the height of the image in there by max-height, it still overflows the image out from the screen, so no luck on that side either.
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
You can try this
I am currently developing a CMS and want to know which way is better for a rendering function of an image (in content):
When I want to crop an image my usual way was following:
Calculate and do the cropping in PHP and cache the cropped image. Then simply render it with an image element.
Now I think there could be a better way:
Simply render a div with e.g. the exact height (width maybe 100% or fixed) and set the image as background-image with background-size: cover; With background-position you can adjust the cropped area.
Because of the rule that you shouldn't display content images as background-image, I have made following measure:
I render the Image inside the div but it's fully transparent and there's an overflow: hidden; on the div. So you can e.g. save the image with right click.
For me the main reasons to use this are following:
It is fully repsonsive: You can always change Sizes and Aspect Ratio and background-size: cover; will always make it look nice (except if you use any bizarre format). So on desktop you can have a 200x200px box and on an other device you could change it to 200x100px without having any problems.
You use the same image for all devices. No caching of different crops (maybe just scale any image above web size down).
This could look like this:
.background-image {
background-image: url(https://placeimg.com/1000/500/nature);
background-size: cover;
background-position: center center;
overflow: hidden;
margin-bottom: 25px;
}
.background-image img {
opacity: 0;
}
.size-a {
width: 200px;
height: 100px;
}
.size-b {
width: 200px;
height: 200px;
}
.size-c {
width: 200px;
height: 800px;
}
.size-d {
width: 800px;
height: 200px;
}
<div class="background-image size-a">
<img src="https://placeimg.com/1000/500/nature">
</div>
<div class="background-image size-b">
<img src="https://placeimg.com/1000/500/nature">
</div>
<div class="background-image size-c">
<img src="https://placeimg.com/1000/500/nature">
</div>
<div class="background-image size-d">
<img src="https://placeimg.com/1000/500/nature">
</div>
HERE as an example
What do you think about this method? What are the benefits and what are the disadvantages? Do you have any other solution?
I vote for PHP way, once you crop it it's easy to place it but what's more important is download speed. With CSS you download whole image and than you just position and/or resize it.
How do you get the main image to only scale/ shrink horizontally like the pics on this website? Instead of scaling the image it starts to cut out the image's sides when you resize the browser. Heres how it should work: http://castus.co.uk/
The main image on the castus.co.uk website stays at the same height no matter how small you resize the browser but it shrinks the image's sides.. I hope that explains it better :)
I can only seem to get the whole image to scale when I resize the browser.
I am currently using the following code for my img class:
img.mail {
width: 100%;
height: auto;
}
Or do you mean this?
background-position: center;
background-image: url('....');
background-repeat: none;
width: 100%;
height: 100px;
It cut instead of scale like what you have posted.
NOTE: You need to have wide picture to make it work prettily
I use:
max-width: 100%;
height: auto;
They are using a centred background image and allowing the containing element to shrink thus hiding the sides of the image.
e.g.
#feature {
background: url("path/to/img") center 0px no-repeat;
width: 100%;
height: 50px; // Height of image
}
example: http://jsfiddle.net/xY9qT/1/