I have searched for a resolution to my problem, but have not yet been successful.
I have images of different sizes in Nivo Slider, but I need to create a viewport that displays the image centered in a div. It's hard to explain, but I have included a diagram below.
The image must be centered in a div, while the div must also be responsive. I don't want the div to change its size and would like the image to create an overflow that is hidden on the div.
I have tried different methods of CSS and HTML, but neither are my greatest strengths.
If I understand correctly what you want to achieve is something like this (uncommenting /*overflow: hidden;*/): DEMO
HTML:
<div>
<img src="http://i.imgur.com/cjgKmvp.jpg"/>
</div>
CSS:
div{
position: relative;
margin: 100px auto;
width: 400px;
height: 300px;
border: 3px solid red;
/*overflow: hidden;*/
}
img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
Note: I comment overflow: hidden; so you can see how the image is positioned.
Related
I have a weird issue on Firefox, it kind of sounds like this one: https://bugzilla.mozilla.org/show_bug.cgi?id=829958 but it has been fixed few years ago.
I have an big image inside a wrapper having width: auto; height: 100%;. The only constraint applied to the image is height: 100%;.
The image is correctly scaled down on all browsers to the maximum height available. On almost all browsers, the wrapper is also scaled down to the new (and effective) size of the image. This is not the behavior on Firefox (tested on 50+), Firefox does scale down the image but not the wrapper who keep the original width of the image as its own width.
Here is a codepen to better simulate the issue: https://codepen.io/Tronix117/pen/MEogMv
The img-wrapper can not be in display: inline; because of effects applied on it. More intermediate div can be added if needed.
On the codepen, don't mind the fix width of scroll-wrapper it's a dynamic value, as well as all transforms values.
Images can be of various width and height and the CSS should be responsive.
The idea is to produce a coverflow with different images using Swiper lib.
I have been struggling on this all day, so thank you for your help!
CSS
html,
body {
height: 100%;
width: 100%;
}
* {
padding: 0;
margin: 0;
}
#viewport {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
overflow: hidden;
display: block;
perspective: 1200px;
transform-style: preserve-3d;
}
#scroll-wrapper {
display: block;
position: relative;
width: 3000px;
height: 100%;
transform-style: preserve-3d;
transform: translate3d(-500px, 0, 0);
}
.img-wrapper {
display: inline-block;
white-space: nowrap;
overflow: hidden;
width: auto;
height: 100%;
position: relative;
transform-style: preserve-3d;
border: 4px solid red;
}
img {
height: 100%;
}
#img-wrapper-1 {
border-color: blue;
transform: translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(30deg);
z-index: -1;
}
#img-wrapper-3 {
border-color: green;
transform: translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(-30deg);
z-index: -1;
}
HTML
<html>
<body>
<div id="viewport">
<div id="scroll-wrapper">
<div id="img-wrapper-1" class="img-wrapper">
<img src="http://via.placeholder.com/2000x1200" />
</div>
<div id="img-wrapper-2" class="img-wrapper">
<img src="http://via.placeholder.com/2000x1200" />
</div>
<div id="img-wrapper-3" class="img-wrapper">
<img src="http://via.placeholder.com/2000x1200" />
</div>
</div>
</div>
</body>
</html>
Very interesting problem!
It's most likely a bug with Firefox, though I think that it's probably caused by Firefox unable to find the correct reference height value for all the cascaded height: x%; of nested elements.
So I gave #viewport an explicit height value: height: calc(100vh - 40px); instead of an implicit one from top: 20px; bottom: 20px;. And it does work!
Demo: https://codepen.io/anon/pen/eGRYqx
I'm trying to place an image between 2 divs on my page. I have currently been able to get an image between the two divs, but it isn't responsive (only in the correct position at 1920 width) and it overlaps the text of both divs:
screenshot from my website
css
.btwimg {
width: 90%;
height: auto;
position: absolute;
transform: translate3d(-20%, -50%, 0);
z-index: 1;
left: 50%;
background: url("../img/lara2.png");
background-repeat: no-repeat;
box-shadow: 0 5px 7px rgba(0,0,0,0.1);
}
html
<div class="btwimg">
<img src="img/lara2.png">
</div>
what I am trying to achieve
Is it possible to achieve what I'm after?
Thanks in advance.
First you have to add the same amount of padding-bottom to the upper DIV and padding-top to the subsequent DIV to create enogh space for your image. (trial and error to find the right amount)
Your btwing DIV should be a child element of the subsequent DIV. Then this CSS should work:
.btwimg {
width: 90%;
height: 250px /* Just a random guess - Needs a fixed height! */
position: absolute;
z-index: 1;
left: 50%;
top: -50%;
transform: translate(-50%, -50%);
background: url("../img/lara2.png");
background-repeat: no-repeat;
box-shadow: 0 5px 7px rgba(0,0,0,0.1);
}
Actually the height setting should be a calc value which is derived from the original width/height proportion and the 90% width you set, like height: calc(9/16 * 90%);if the proportion is 16/9
I took #Johannes answer and tweaked a little to get the result I wanted:
.btwimg {
max-width: 800px;
min-width: 300px;
height: 16vw;
position: absolute;
z-index: 1;
left: 50%;
top: calc(2vw - 38px); /* keeps div roughly centred at all target resolutions */
transform: translate(-50%, -50%);
}
I then used an image rather than a background to make the re-sizing easier.
.btwimg img {
height: auto;
width: 100%;
}
btwimg was put as a child of the 2nd div as recommended
result at mobile resolutions
result at desktop resolutions
Hi I have a fluid container that is based on screen height and width in my website. I would like to have an image fill the container at all times as it expands in any direction based on screen size. The images used will vary in size and aspect ratio.
I have made an attempt with html and css below:
div {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 80vh;
width: 80%;
background-color: red;
position: relative;
overflow: hidden;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
/* max-width: 100%; // If used Image needs to be tall enough to fill div */
/* max-height: 100%; // If used Image needs to be wide enough to fill div */
}
<div>
<img src="http://i.imgur.com/kOY2G57.jpg">
</div>
Without max-height and max-width, this works well if the img is smaller than the container but does not work if the images come out larger as they come out in their natural size and get cropped.
jsfiddle example
Is it possible to accomplish this task with just pure css?
Update
I also would like to avoid using background images as a solution and see if this is possible with just the img tag in place at the dom so as to avoid programing the img tags if possible.
Instead of using the <img> tag you can just give the <div> a background image with background-size: cover property. The background image will maintain the aspect ratio while covering the entire div container at all times.
<div></div>
div {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 80vh;
width: 80%;
background: red url("http://i.imgur.com/kOY2G57.jpg") center center;
background-size: cover;
position: relative;
overflow: hidden;
}
Use object-fit for images to achieve the same result akin to background-size cover, contain:
.imgFit {
object-fit: cover; /* cover, contain */
display: block;
width: 100%;
height: 100%;
}
Use like:
<img class="imgFit" src="" alt="">
I have two right triangle images that I want to put together like this (solid colors only for example):
I can think of a couple of ways to do this:
Divs with background images, and positioning them on top of each
other
A similar approach to the above, but with images instead of divs
The problem comes from the fact that I want to be able to hover (and click) on each individual triangle and have it change it's state (such as change color on hover).
Both of my above solutions create the problem where one is on top of the other, and I cannot click or hover over the other. I was thinking of doing this with CSS shapes, but those usually involve borders and I don't know of a way to overlay the image on those.
I need to be able to accomplish this with just CSS and HTML, and ideally without an image map.
Is this what you want?
Edit: I didn't notice there was another answer with similar approach, had the answer window opened for awhile, sorry.
.container {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
}
.triangle {
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 0;
overflow: hidden;
}
.triangle:hover {
border: 1px solid red;
}
.top_right {
transform: skewX(45deg);
transform-origin: 0 0;
}
.top_right img{
transform: skewX(-45deg);
transform-origin: 0 0;
}
.bottom_left {
transform: skewX(45deg);
transform-origin: 0 100%;
}
.bottom_left img{
transform: skewX(-45deg);
transform-origin: 0 100%;
}
<div class="container">
<div class="triangle top_right">
<img src="http://www.avatarsdb.com/avatars/spongebob_happy.jpg">
</div>
<div class="triangle bottom_left">
<img src="http://www.avatarsdb.com/avatars/say_cheese.jpg">
</div>
</div>
Another option is to use css skew:
your html:
<div class="img-container">
<img src="http://www.natureasia.com/common/img/splash/thailand.jpg" />
</div>
<div class="img-container">
<img src="http://www.worddive.com/blog/wp-content/uploads/2014/06/nature-and-environment-course.jpg"/>
</div>
The css:
.img-container, .img-container img { width: 100%; height: 100%; }
.img-container {
overflow: hidden;
position: absolute;
transform: skewX(-68deg);
}
.img-container:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.img-container:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.img-container img {
transform: skewX(68deg);
transform-origin: inherit;
}
It will probably work better with square images, however you can play around with the skew until it looks right.
Check out this Fiddle or rotating the other way
Again, not 100% sure on browser compatibility tho. If you need to guarantee that all browsers render properly you might be best of using images.
I am trying to align an image vertically within a div with overflow set to hidden so that the container has the same height for each post. I have tried a lot of other solutions, but it is not working with the overflow element. Anybody? This is my CSS code so far:
.featured-image-blog{
height: 220px;
width: 600px;
overflow: hidden;
}
.featured-image-blog img{
height: auto;
width: 600px;
}
and the HTML:
<div class="featured-image-blog">
<?php the_post_thumbnail('featured-image'); ?>
</div>
Thanks in advance!
As vertical alignment has always been a pain in legacy HTML and stuff I suggest you give the div:
position: relative;
And give the img:
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
That should do it..
Have you tried using the vertical-align CSS property?
Give this a try:
.featured-image-blog img{
height: auto;
width: 600px;
vertical-align: middle;
}
It should align it to the middle of the parent container.
Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align