Here is plunker example, the left (yellow) cell is the relevant one. It isn't bootstrap-specific but I've used its classes to make the image responsive.
<div class="container">
<div class="row">
<div class="col-xs-6" style="padding:30px; background:yellow">
<div class="wrapper">
<img class="center-block img-responsive" style="position: absolute" src="..."">
<img class="center-block img-responsive" style="visibility: hidden" src="...">
</div>
</div>
<div class="col-xs-6" style="padding:30px; background:lime">
<img class="center-block img-responsive" src="...">
</div>
</div>
</div>
And relevant css, borrowed from bootstrap
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.img-responsive {
display: block;
max-width: 100%;
width:90%;
height: auto;
}
.img-responsive:hover {
min-width:110%;
}
.wrapper {
position: relative;
height: 100%;
}
The thing I'm trying to accomplish:
Fit the image into the container (bootstrap column with some padding here) proportionally (ok)
Make it a bit smaller while keeping it at center, container's size is unchanged (ok)
Make it bigger on hover while still keeping it at center, container's size is unchanged (fixed with transform: scale)
The second layered image (absolute-positioned) should fit the size and the position of the first (not ok)
I've made placeholder<img> hidden to keep the container's size, but <img> with position: absolute aligns to the left anyway.
How this can be solved? I will use JS on page but clearly I'm not eager to use it to pin that image to the placeholder programmatically.
Make it bigger on hover while still keeping it at center, container's size is unchanged
Use CSS3's transform attribute :
.img-responsive:hover {
transform: scale(1.1);
}
https://developer.mozilla.org/fr/docs/Web/CSS/transform
Make sure to prefix the transform property:
http://caniuse.com/#search=transform
Plunker version: http://plnkr.co/edit/HYJ9XJ8rAc3cgVI0uKFe?p=preview
The second layered image (absolute-positioned) should fit the size and the position of the first
Add left: 0 and right: 0 to your absolute positioned element.
Related
I'm trying to do a pure css image gallery for a static site. I want to create square elements with centered lazily loaded image previews in them.
My markup works fine when proportional width and fixed height are set, but I can't find a way to achieve fixed aspect ratio for image container.
I've tried:
Rewrite everything to flexboxes. It breaks lazy image loading - seems like at some point every image appears on the viewport causing it to load. Generating previews on server side is not an option for me.
padding-bottom trick. It totally breaks the behavior of object-fit: cover; and image preview centering.
vw kinda works, but my container is already in a flexible container and I can't calculate it accurately.
calc. As expected, it does not work with dynamic values, but I tried it just in case:)
Is where a way to get height to depend on width using pure css?
Here is the code snippet (same on JsFiddle):
div.image_list {
display: block;
width: 300px; /* for example, not set in real case */
}
.image_wrapper {
float: left;
width: 30%;
height: 100px; /* FIXME: make height always equal to width */
padding: 2%;
background: blue; /* for example only */
}
img {
object-fit: cover;
max-width: 100%;
width: 100%;
height: 100%;
}
<div class="image_list">
<div class="image_wrapper">
<img src="https://bigmemes.funnyjunk.com/pictures/Warning+long+post+short+postmedium+post_ba781a_5089470.jpg" loading="lazy">
</div>
<div class="image_wrapper">
<img src="https://images.opencollective.com/jsbin/fef9bb5/logo/256.png" loading="lazy">
</div>
<div class="image_wrapper">
<img src="http://voidcanvas.com/wp-content/themes/reader/images/logo.png?v=2" loading="lazy">
</div>
<div class="image_wrapper">
<img src="http://voidcanvas.com/wp-content/themes/reader/images/logo.png?v=2" loading="lazy">
</div>
<div class="image_wrapper">
<img src="https://bigmemes.funnyjunk.com/pictures/Warning+long+post+short+postmedium+post_ba781a_5089470.jpg" loading="lazy">
</div>
<div class="image_wrapper">
<img src="https://images.opencollective.com/jsbin/fef9bb5/logo/256.png" loading="lazy">
</div>
</div>
I'm trying to blur the edges of an image like the picture shown at https://stackoverflow.com/a/24953573.
I need to do this on a foreground image (not one set in css) because the img url is dynamically changed. But box-shadow seems to have no effect on a foreground image. Also I'm using the Bootstrap 4.3 img-fluid class.
In other words, the code at the SO post referenced above works, but the edges on this image are not blurred (css inline for simplicity):
<img src="/images/mypic.jpg"
class="img-fluid"
style="box-shadow: 0 0 5px 5px white inset;">
.img-fluid sets max-width: 100% and height:auto. I tried over-riding these with specific values (which I don't want to do to maintain a responsive image), but it had no effect either.
You need to wrap img tag by div element with class name of .img-blur so use the :after pseudo-element can be used to insert some content after the content of an element.
.img-blur{
position: relative;
display: inline-block;
}
.img-blur:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 10px 10px #ffffff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row" >
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
</div>
</div>
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/ffff22">
</div>
</div>
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
</div>
</div>
</div>
</div>
There is a problem with style images with inset.
But you have 2 alternatives to do this. You can add a container with position relative and inside put img with class img-fluid and div with positon absolute to this container.
The second option is to set a container with position relative and img inside and style that container with pseudo-class ::after.
If you will do that it works but there will be a problem with the right box-shadow that if img is smaller than a container. You can fix these if you will use some JS code.
I made an example with jQuery ( cause you are using bootstrap and bootstrap is using jquery).
https://codesandbox.io/s/flamboyant-wing-z9lhm
Unfortunally, CSS 'Inset' Box shadows don't work on img tags. To workaround this, you have a few couple options, for example, is possible wrap the image on a div tag and use a pseudo-element to apply the box-shadow on it.
The problem here is that, as standard, the div tag is a "Block" element, and as so will cover the entire parent width. You could fix this applying a display: inline-block or a float: left property. Perhaps is not the best "standard-compliant", but will work on this case. I attach a example with this concept below:
div {
position: relative;
display: inline-block;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 5px 5px white inset;
}
<div>
<img src="https://picsum.photos/200/300" class="img-fluid">
</div>
How to size/wrap a div container around an image inside It? Where float: right and margin-left: auto are potentially causing issues.
I'm struggling to get a div to be sized by wrapping properly around the image inside it. Please have a look at the example I'm referring to here:
Link to Example
(Might be worth playing around with the window size to help explain my problem)
I'm practicing with Bootstrap for the first time. The red blocks on each side are grid blocks 1 and 12, with the blue, and green sections filling the remaining 10. The big orange rectangles are responsive images that I want to be kept central spaced 20px apart at all times.
Using Chrome's "Inspect Element" (or similar) - If you inspect the orange rectangle on the right hand side, and have a look at the container div (class="container-img-r") - This div is wrapping around the orange image exactly how I wanted (albeit including the invisible border). But I'm not having much luck achieving the same result with the div container for the orange image on the left side (it still fills the blue parent element)
I've played around with different options for float/margins/position but can't seem to crack it.
Here's the CSS I have for the relevent content:
.container-img-l {
/* float:right; ??? Nothing I tried here seemed to make a difference */
}
.container-img-r {
float:left;
}
.item-pos-l {
margin-left:auto;
border-right:10px solid transparent; /* Margins just collapsed when resizing window */
height:323px;
width:510px;
}
.item-pos-r {
float:left;
border-left:10px solid transparent;
height:323px;
width:510px;
}
The reason for me wanting the div to accurately wrap around the responsive images is that I want to overlay some more CSS content over the images, scaling/re-positioning automatically as the window/device size changes (Click here and you'll clearly see where I'm hoping to implement this responsive style).
Maybe there are clashes with the Bootstrap CSS at play but I'm out of ideas.
Your first link doesn't remotely look like the html you want to make responsive. It would be best to learn responsive and fluid (no pixels heights or widths if possible) css before attempting to modify a framework you are unfamiliar with. Also, you have an error in your html - validate it to make sure you've closed all your elements. Also indent and comment all your code and avoid the use of inline styles.
Demo: http://jsbin.com/wazanu/2/
http://jsbin.com/wazanu/2/edit -- edit link
CSS:
body {background:#eee}
.header {padding:20px;}
.portfolio-grid .col-sm-6 {
margin-bottom: 30px
}
.img-wrapper .title {
text-align:center;
}
#media (min-width:768px) {
.img-wrapper {
position: relative;
overflow: hidden;
}
.img-wrapper img {width:100%;}
.img-wrapper .title {
position: absolute;
text-align:left;
bottom: -90px;
padding: 0 20px 20px 20px;
height: 150px;
background: red;
transition: all .5s ease-in-out;
}
.img-wrapper .title h3 {
margin: 0;
height: 60px;
line-height: 60px;
}
.img-wrapper:hover .title {
bottom: 0
}
}
HTML:
<header class="header text-center">
My header
</header>
<div class="container">
<div class="row portfolio-grid">
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
<div class="title">
<h3>Title of Project</h3>
<p>Content about project goes here</p>
</div>
</div>
</div>
<!--/.col-sm-6 -->
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placebear.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
<div class="clearfix visible-sm"></div>
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
</div>
<!--/.row-->
</div>
<!--/.container-->
I have a responsive image list. Each image is inside a container.
I want the image container to be 75% of its first container (unit container in this case)
the image ration is 1:1
I played a little with the image container percentage width but it feels like this is not the solution.
<ul class="list-inline unit_list ">
<li class="unit_list_item col-xs-24 col-sm-12 col-md-8">
<a href='#' alt="unit">
<div class="unit_container">
<div class="icon_container unit_icon">
<img class="img-responsive unit_image" src="http://placehold.it/60X60" />
</div>
<div class="unit_name">FREE</div>
</div>
</a>
</li></ul>
Btw, I'm using bootstrap if that's matter.
http://jsfiddle.net/wmu3w3ej/1/
Thanks to #Mary Melody
transform: scale(0.75);
works like magic
I'm a little afraid to use it since it's so simple.
any thoughts?
Using the logic from here: https://stackoverflow.com/a/20117454/3389737
I have applied it to your situation: http://jsfiddle.net/phwaLmen/1/
#wrapper
{
position: relative;
width: 50%;
overflow: hidden;
}
#wrapper:before
{
content: "";
display: block;
padding-top: 75%;
}
#image
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
<div id="wrapper">
<img src="http://placehold.it/350x350" id="image">
</div>
Add relative positioning to the parent, set its width as you'd like and make sure the overflow is hidden.
Create a :before element for the wrapper with a padding-top of 75%. Since there is no height specified for the #wrapper, this 75% is based on the width of the element :)
Then you have your image, positioned absolutely and then fitted to the container. If you want the image to be cropped instead of resized, remove the height: 100% and width: 100% style rules from it.
You can do it like this (in your html):
<img src="img.jpg" height="75%" />
Good luck!
I'm trying to find out how to define the height for this .gallery element based on the size of the img element inside it.
<div class="row">
<div class="large-10 columns">
<div class="gallery portrait">
<div class="cover">
<img src="http://placekitten.com/800/1029">
</div>
<ul class="thumbs">
<li class="thumb"></li>
<li class="thumb"></li>
<li class="thumb"></li>
</ul>
</div>
</div>
</div>
I'm using percentage-based heights and widths in my CSS to set the height and width of the elements inside my gallery. However, I'm defining the height of the .gallery element in pixels so my percentage elements work.
.gallery {
height: 680px;
}
I'm trying to get the height of the .gallery to adjust its self when the browser window is resized and my image gets smaller.
I've got a demo of the problem I'm having over here: http://codepen.io/realph/pen/kKAmx
Any help is appreciated. Thanks in advance!
If I understand what your issue correctly, then simply remove the height: entries on your gallery and cover class. The gallery element should expand contract to fit the image (as long as the image has % width).
Example Fiddle
CSS:
.gallery {
background: orange;
width: 100%;
float: left;
//height: 680px;
}
.cover {
float: right;
width: 63.8554217%;
//height: 680px;
overflow: hidden;
}
.gallery img {
width: 50%;
}