I would like to display full width image in wide format (crop top of image to max-height: 500px;) on desktop display and original aspect ratio for mobile devices.
I am using gantry framework on a Wordpress site. I have used a css work around to force the image to display full width outside the parent boxed container.
Example This crops from the top except there is space pushed to the top when the image height is less than max-height?
.boxed-container{
margin:30px;
padding: 30px;
background:red;
}
.bg-img{
position: relative;
display: block;
overflow: hidden;
padding: 0px;
margin: 0px;
width: 100vw;
height: 100vh;
max-height: 300px;
left: 50%;
right: 50%;
margin-left: -50vw !important;
margin-right: -50vw !important;
background: url(http://www.photographymad.com/files/images/rule-of-thirds-movement.jpg) no-repeat bottom;
background-size: 100% auto;
}
h1 {
position: absolute;
width: 100%;
bottom: 0px;
text-align: center;
margin-bottom: 0px;
}
<div class="boxed-container">
This is where the boxed content belongs.
<div class="bg-img">
<h1>This is the header</h1>
</div>
</div>
This code crops the image the correct way with object-fit:cover
#image {
width: 100%;;
height: 500px;
object-fit:cover;
}
And with #media you could change the height and with however you like to, to fit the screen resolution.
Sidenote: This doesn't work in IE.
EDIT:
object-fit:
fill
The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.
contain
The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.
cover
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.
none
The replaced content is not resized to fit inside the element’s content box: the object’s concrete object size is determined using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.
scale-down
The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.
Related
enter image description here
is it possible to create something like the picture?
(so a header with an image and at the bottom side of it a semitransparent navbar ( so I can see the bottom of the picture)
What I did was that I used background-image to add the image to the background of your header, a whitespace div to move the navbar to the bottom, and then added an RGBA color (red, green, blue, alpha, with alpha meaning transparency) onto the background-color of the navbar. Here is my code:
Codesandbox Sandbox
Or
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
border: 5px solid black;
height: 400px;
background-image: url("https://images.unsplash.com/7/Top_view.jpg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format");
/* background-size: cover; */
background-repeat: no-repeat;
background-size: 100% 100%;
}
div#whitespace {
height: calc(100% - 40px); /* 20 px is the height of the navbar */
}
nav {
display: flex;
justify-content: space-evenly;
align-items: center;
background-color: rgba(255, 255, 255, 0.35);
height: 40px;
}
a {
/* text-decoration: none; */
color: black;
font-weight: bold;
}
<header>
<div id="whitespace"></div>
<nav>
Home
Link 1
Link 2
Link 3
</nav>
</header>
What I am doing here is defining a header element with the background-image of url("https://images.unsplash.com/7/Top_view.jpg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format"). Now url() is a CSS function that allows you to include a file, namely our header image. Then, we set background-size to 100% 100%, so the image will resize to fit the dimensions of our header and completely fill the header. We also set background-repeat to no-repeat so the image will not repeat (though it is unnecessary because the image already fills all of the header elements). Then, I add styles to the whitespace div, making the height of the div 100% (or all the height of our header) and subtracting the height of the div (40px), and I use the CSS function calc which allows me to do mathematical operations on some CSS units. So, by using this whitespace div, it pushes the navbar down to the bottom so it is placed correctly. Finally, for our navbar, I use flexbox to align the items and evenly space the links. Then, I set the background color to rgba(255, 255, 255, 0.35). This is rgb(255, 255, 255 which is white, but now we set the transparency (alpha) value to 0.35, making the color transparent so we can see the background image under the navbar.
I have an <img> that shows a remote image.
I want it to fallback to another local image, in the case where the remote one is not reachable.
<img class="cc_image fallback" src="http://www.iconarchive.com/download/i82888/limav/flat-gradient-social/Creative-Commons.ico">
.cc_image {
width: 256px;
height: 256px;
}
.cc_image.fallback {
/* this URL here is theoretically a local one (always reachable) */
background-image: url('https://cdn2.iconfinder.com/data/icons/picons-basic-3/57/basic3-010_creative_commons-256.png');
}
It works so that when the src image is not found then the background image will be shown.
The drawbacks are:
it will always load the background image (additional HTTP request)
it shows a little not-found-icon (a question mark on Safari) at the place of te original image, that is displayed above the background-image (not a big issue, but I'd like to get rid of it)
How could I solve these issues?
Or: are there other technics to achieve the same result?
I found this question but the given solutions rely on Javascript or on <object> (that seems to not work on Chrome). I would like a pure CSS/HTML solution, without Javascript if possible.
I know about the multiple background-image but am not sure whether it is a good option (browser support? and will it fallback with an unreachable image?).
Or I was thinking about embedding a SVG image as data-uri.
Suggestions for the most flexible (and compatible) method?
Unfortunately, you can't achieve both without Javascript or object tag.
You could do this to avoid the missing image icon:
Place your image in a container (it might already be in one).
Make the container have the same width and height as the image.
Set the fallback image as the background image of the container.
Set the remote image as the background image of your img tag.
Load an 1x1 pixel transparent png as the src of your image (see code for how that can be done without an extra HTTP request).
Code:
HTML
<!-- you could use any other tag, such as span or a instead of div, see css below -->
<div class="cc_image_container fallback">
<img class="cc_image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image: url(*your remote image*)"/>
</div>
CSS
.fallback {
background-image: url(*fallback image here*);
display: inline-block; /*to ensure it wraps correctly around the image, even if it is a a or span tag*/
min-width: specify a minimum width (could be the width of the fallback image) px;
min-height: specify a minimum height (could be the height of the fallback image) px;
background-position: center center; // fallback for older browsers
background-size: cover;
background-repeat: no-repeat;
}
.cc_image {
min-width: same as container px;
min-height: same as container px;
background-position: center center; // fallback for older browsers
background-size: cover;
background-repeat: no-repeat;
}
min-width and max-width make sure that the background images remain visible.
background-position makes sure that the central part of the images remains visible and is a graceful degradation for older browsers
background-size resizes the background image to fill the element background. The cover value means that the image will be resized so it will completely cover the element (some of the outer edges of the image may be cropped)
The base64 data in the img src tag is a transparent 1px png.
This will have an additional benefit that regular users and some bots may not be able to save your images (a rudimentary image protection)
The only drawback is, that you will still have one extra HTTP request for the fallback image.
I have found a solution on Codepen, which I would like to share with you:
https://codepen.io/anon/pen/Eqgyyo
I prefer this solution, because it works with real image tags, not background images.
body {
color: #2c3e50;
font-family: 'verdana';
line-height: 1.35em;
padding: 30px;
}
h1 {
margin-bottom: 40px;
}
ul {
list-style: none;
padding: 0;
}
* {
box-sizing: border-box;
}
img {
color: #95a5a6;
font-size: 12px;
min-height: 50px;
position: relative;
}
img:before {
background: #f1f1f1;
border: 1px solid #ccc;
border-radius: 3px;
content: '\1F517' ' broken image of 'attr(alt);
display: block;
left: 0;
padding: 10px;
position: absolute;
top: -10px;
width: 100%;
}
<h1>Broken image fallback CSS</h1>
<img src="no-image-here" alt="Cats with synthesizers in the space " />
<br /><br />
<ul>
<li>✓ Firefox</li>
<li>✓ Chrome</li>
<li>✓ Opera</li>
<li>✗ Safari (desktop, mobile)</li>
<li>✗ iOS webview</li>
</ul>
For my website this is what I am using for the image with regards to responsive design:
.logo {
max-width: 100%;
display: block;
height: auto;
margin-left: auto;
margin-right: auto;
}
The image scales properly width wise but the image's height is too big. In these kinds of situations what can one do to make the image scale properly? If I remove height auto and assign 70px the image looks good when viewed in full version but as you begin to shrink the size of the browser the image looks like it's going inwards.
HOw can i fix this?
try this:
{
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
for this wrapp a div around img and apply the height you want and overflow hide it
.imgwrapp {width:100%;height:70px;overflow:hidden;float:left}
So given the css you have there, the ratio of width to height of the image is what's giving you problems. If you don't like the height of the image when the browser is wide, then you should probably get a different image/crop it. When you set the height to 70px what you're doing is forcing the image into a box that it doesn't fit in, so the image will look funny as it's being scaled weird.
But alas there is another option. here is a jsfiddle that shows only the amount of the image that fits within my first n pixels (in your case 70) so that way it will kind of slide out of view. Check the css here :
.header {
width: 100%;
height: 100px;
overflow:hidden;
}
.everythingelse {
width: 100%;
height: 200px;
}
In a responsive design, how can the width of a <figcaption> be made to adjust according to the width of the <img>, but not exceed it?
<section>
<figure>
<img src="link.jpg">
<figcaption>Caption</figcaption>
</figure>
</section>
The corresponding CSS only limits the <img> and not the <figcaption>, see:
How can the <figcaption> be constrained along with the <img>, without using max-width: 200px (or 12.5em) on the <figure> container?
Here are the important bits of CSS (full on JSFiddle):
section figure {
position: relative;
margin: 0 auto; /* to center it */
}
section figure img {
max-width: 100%;
vertical-align: middle; /* to make sure images behave like blocks */
}
section figure figcaption {
position: absolute;
right: 0; bottom: 0; left: 0;
}
Setting max-width: 100%; display: inline-block; (http://jsfiddle.net/vZpmq/1/) or float: [left|right] (http://jsfiddle.net/cdmU3/1/) on the section would cause it to shrink-to-fit it's content (and the box it's in). You might need to rework some other things to fit those changes, though.
Alternatively, try setting width: 100%; height: auto; on the img, and set the width on the figure element? http://jsfiddle.net/9yUsP/
(setting height: auto; on the img means it's retain it's aspect ratio regardless of height or width attributes set on the img element itself)
When I insert an image in a container with fixed width and height, the image stretches to fit that space. Is there a way to display the image at its normal size, but with the excess clipped out?
The modern way is to use object-fit: none; (or the more common object-fit: cover; if you want to scale, but without stretching).
img {
object-fit: cover;
}
97% of browser sessions support this as of 2022 May. — Can I use?
If you want to anchor the image to the top left corner instead of the center, add:
img {
object-position: 0 0;
}
<div style="width: 100px; height: 100px; background-image: url(your image); background-repeat: no-repeat;"></div>
Then in the above DIV you can play with CSS
width/height
background-position
to create different crop effects.
You can use the CSS clip property:
#image_element
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
The downside of using clip is that the element has to be absolutely positioned, and is only available with the 'rect' shape.
See:
https://www.w3schools.com/cssref/pr_pos_clip.asp
http://www.cssplay.co.uk/menu/clip_gallery
Use this :
http://www.w3schools.com/css/pr_background-position.asp
background-position: 5px 5px;
and then set the height and width of the div
height: 55px;
width: 55px;
Show it as a background image