How to scale a div to a responsive image - javascript

I'm making a responsive website and I want a image next to a div.
While placing the image next to the div is no problem, it gets tricky when I make my screen smaller.
I gave the image a width of 100% and a height of auto (responsive image) and this is the result:
This example is how it needs to be permanent, even when I scale it down.
Right now when I scale it down, this happens:
Because the image is responsive, it shrinks and the div stays in place.
Is there any way to make the div scale with the picture?
My CSS (Made in SASS):
.block-middle{
background-color: $oranje;
color: #fff;
padding-top: 85px;
padding-left: 55px;
padding-right: 55px;
line-height: 30px;
font-size: 18px;
font-weight: 300;
padding-bottom: 87px;
.button-wit-bruin{
margin-top: 30px;
display: inline-block;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 700;
padding-bottom: 30px;
}
}
.block-right{
img.liggend{
width: 100%;
height: auto;
}
}
And the HTML is simply:
<div class="col-md-4 no-p block-middle">

<div id="img1_div"></div>
<img id="img1" alt="" />
<script>
$(document).ready( function(){
$(window).on("load", function(){
$(window).on("resize", function(){
var imgHeight = $("#img1").height();
$("#img1_div").height( imgHeight );
}).resize();
});//window load
});//document ready
</script>
This code will work in most cases ( except there's no overriding behaviour ), no matter where your image and div are placed. I would like to mention though that resize and scroll events should not be handled crudely this way, but should be optimised using a global timeout variable.

the trick is to set the height of the div relative to the width...which ironically, you can't do with the height property, since height:auto; makes it the height of it's children.
padding however is relative to the width of the parent...so it's a little bit funky, but if you play with the padding-bottom as a % and make the height:0px; you can achieve the desired effect without using Javascript. Here's the relevant CSS:
.responsive-background {
float:left;
width:60%;
height:0px;
padding-bottom:30%; /* adjust this depending on the height/width of the image you are aligning to */
}
And a Codepen with more detail and some additional styling:
http://codepen.io/ryantdecker/pen/LZYYaj
I think this will do the trick for you.

One way I can think of is, use the image as background for div and use background-size as cover:
.right-block {
background: url('https://placeimg.com/640/480/any');
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}

Ahhh sorry I misunderstood your question. This can be done with a bit of flexbox if your target browsers support it. Is this the result you're looking for?
.container {
display: flex;
}
.left-block {
background: red;
width: 50%;
}
.right-block {
width: 50%;
}
.image {
display: block; // Removes spacing around image cause by default display: inline;
width: 100%;
}
<div class="container">
<div class="left-block">
</div>
<div class="right-block">
<img class="image" src="https://placeimg.com/640/480/any">
</div>
</div>
Previous Answer:
It seems as though there's a height set on your .block-right element. The code you provided is rather incomplete as you're missing the markup for your .block-right element. But is this what you're looking for?
.left-block,
.right-block {
float: left;
width: 50%;
}
.left-block {
background: red;
height: 200px;
}
.right-block {
background: grey;
}
.image {
width: 100%;
}
<div class="left-block">
</div>
<div class="right-block">
<img class="image" src="https://placeimg.com/640/480/any">
</div>

Related

Automatically Size a Container div to the Dimensions of an img element inside of it using only CSS?

I have a situation where I have a div container with an image inside of it. The image is a variable asset so I never know what the height and width of the image will be. I want the div container to always fit to the size of the image and then add some padding to it... so for example if the image inside is 200px by 100px then the container should stretch to be 200px by 100px and then have 30px padding around it.
Here is an example of the CSS I'm using.. (the image is meant to be centered within the div vertically and horizontally):
#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}
Just for reference this is the html element:
<div id="container"><img src="image.png"></div>
So far I haven't been able to find any css trick that works. I tried using "fit-content" on the container, but it seems like fit-content is more for stretching the image to fit the container, not the other way around, so I resorted to using Javascript:
var container = document.getElementById("container");
container.style.width= container.querySelector('img').offsetWidth+"px";
container.style.height= container.querySelector('img').offsetHeight+"px";
I would rather not use JavaScript if I don't need to, so please let me know if there is a simpler way of doing this...
AFAIU, Your code is working as expected without the JavaScript:
#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}
<div id="container">
<img src="https://picsum.photos/400">
</div>
Ok guys, I solved it...
I had this in my css:
#page img, #page div {position: absolute; border: 0;}
This was causing the image to have an absolute position which pulled it out of the document flow. Once I added position: relative to the img, it started working.
I appreciate the responses everyone. It was helpful! Thank you!
If I understand right this is what you want. No matter what size the image is the container will be 20px bigger.
#container {
float: left;
background: pink;
}
#image {
width: 500px;
height: 300px;
padding: 20px;
animation: size 5s linear infinite alternate;
}
#keyframes size {
from {width: 100px; height: auto;}
to {width:400px; height: auto;}
}
<div id="container">
<img src="https://static.toiimg.com/photo/72975551.cms" alt="pic" id="image"/>
</div>

Header banner with css only?

I'm a beginner in css and i'm trying to create a hero banner with css only and make it responsive, i'm quite confused with positioning of the texts on top of the image, if i zoom the page or resize it down the texts don't respond.
<header class="main-header">
<img src="imgs/header.jpg"/>
<div class="title">
<h1>This is a title</h1>
<p>some texts here</p>
</div>
</header>
css:
.main-header img {
max-width: 100%;
margin: 0 auto;
position: relative;
}
.title {
position: relative;
top: -450px;
left: 10%;
text-align: center;
display: inline-block;
color: white;
margin: 0 auto;
width: 80%;
text-transform: uppercase;
}
.title h1 {
font-size: 2.7rem;
font-weight: 700;
margin: 0 auto;
width: 80%;
margin-bottom: 1.5%;
}
.title p {
font-size: .60rem;
width: 33%;
margin: 0 auto;
line-height: 1.8;
}
Is it even possible to create a hero banner with css only? cuz i can't see any tutorial for that..
Example: Responsive Hero Banner with Image and Text
Here's a very minimal example of a full width, responsive hero banner with image and text, using only css.
The HTML:
<div class="hero-wrapper">
<header class="hero">
<div class="hero-sizing"></div>
<div class="hero-content">
<h1>Hero Title</h1>
<p>Hero paragraph text.</p>
</div>
</header>
</div>
The only unusual element there is the "hero-sizing" div. It's there to ensure the banners image maintains its aspect ratio at different window size (more on "hero-sizing" later).
On to the css. First is the outermost hero-wrapper class:
.hero-wrapper {
clear: both;
position: relative;
width: 100%;
text-align: center;
font: 18px helvetica, sans-serif;
color: white;
}
Nothing too confusing here, mostly just setting up some formatting. Note that width: 100% makes the banner extend the full width of the window.
Next is the hero class, which specifies the banner image and how it is displayed:
.hero {
background-image: url(http://lorempixel.com/image_output/people-q-c-1200-400-6.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
background-size: 100% auto;
}
This hero class specifies the image, centers it, and sets it to the full width of its container.
Next comes the hero-sizing class that's responsible for maintaining the banner's aspect ratio when it's resized:
.hero-sizing {
padding-top: 33%;
}
To maintain the image's aspect ratio, padding-top must match the image's height:width ratio. Since the image in this example is 1200 wide by 400 high, we've set padding-top to 33%. hero-sizing serves an important function -- it stretches and shrinks the height of div containing the background image, so the div's aspect ratio and the image's aspect ratio always match.
With just the above css, we now have a full-width, responsive banner image that maintains its aspect ratio, but we still would like to be able to add some text to the banner and have it look decent. That's what the hero-content class and 'hero-content:before pseudo-class are for:
.hero-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.hero-content:before {
content: ' ';
display: block;
height: 40%;
}
Our content ought to be placed at roughly the same spot over the image, regardless of the image's size. To accomplish this, we're employing a little trick with :before pseudo-class to push our content down the page by 40% of the banner's current height. This positioning 'trick' means our content's position is responsive, as it will stay at the same place over the image.
The final css just sets some formatting preferences:
.hero-content h1,
.hero-content p {
margin-top: 0px;
margin-bottom: 6px;
}
And we're done.
Granted, this is just a bare minimum example which could be improved for small screens with #media queries (like reducing the font size), but this example shows how to implement two very useful capabilities:
full width, responsive hero banner images that maintain aspect ratio
consistent content positioning over the image
.hero-wrapper {
clear: both;
position: relative;
width: 100%;
text-align: center;
font: 18px helvetica, sans-serif;
color: white;
}
.hero {
background-image: url(https://picsum.photos/id/1062/1200/400);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
background-size: 100% auto;
}
.hero-sizing {
padding-top: 33%;
}
.hero-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.hero-content:before {
content: ' ';
display: block;
height: 40%;
}
.hero-content h1,
.hero-content p {
margin-top: 0px;
margin-bottom: 6px;
}
body {
margin: 0;
background-color: #d0d0d0;
}
<div class="hero-wrapper">
<header class="hero">
<div class="hero-sizing"></div>
<div class="hero-content">
<h1>Hero Title</h1>
<p>Hero paragraph text.</p>
</div>
</header>
</div>

Issues getting a background image to appear

I am unsure of why I cannot get a background-image to appear in the following snippet. The url is correct and I have set size to the image. Also, how can you align a background-image in the center of a page? I know there are properties like right top, but I do not see one for center vertically and horizontally.
Thanks.
$("#arrow-icon").slideToggle(1000);
.arrow {
height: 400px;
width: 100%;
background-color: blue;
text-align: center;
}
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
<div id="arrow-icon">
<!-- <img src="http://optimumwebdesigns.com/icons/down-arrow.ico"> -->
</div>
</div>
The problem is that the div is smaller that the picture.
You can get around this with the background-size property
Example:
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
background-size:100% 100%;
}
fiddle - https://fiddle.jshell.net/800modgt/
Or you can change the div width and height to the image width and height...
And in terms of centering, simply use:
background-position: center;
That said, I'm noticing that it's not center on the page on the Fiddle previously posts. You can use
margin:auto;
to center a <div> horizontally
You might consider for the positioning using CSS3 for positioning, as it's very versatile in changing position of a div and how far it slides out. Here is a JSFiddle. It's for side animation, but it will work for just a standard up/down, too.
https://jsbin.com/yovaqo/edit?html,css,js,output

Is there a way to make the hover area larger than the image?

I was wondering if there is a way to make the hover area bigger than the image?
For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. What I would like to know is if I can hover outside the image but still trigger the change in the image.
Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to.
This is a working example, just hover in the gray colored region
.outer {
border: 1px solid;
padding: 60px;
width: 300px;
background-color: #ddd;
}
.outer:hover>img {
content: url('http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg');
}
<div class="outer">
<img src="http://goo.gl/7VYJyX" />
</div>
Yes. Put it in a container (<div>, <a>, whatever), add padding to the container (to increase the area).
If what you're doing is in JS, attach the hover handler to the container instead of the image.
If you're doing CSS, something like this should be helpful:
.container:hover img{
/* styles for img when .container is hovered*/
}
Is this what you are going for. her is my fiddle https://jsfiddle.net/pdjoh1dy/1/
HTML
<div id="hover-example">
<div id="img-holder">
</div>
</div>
CSS
#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
background-color: red;
margin: 10%;
width: 80%;
height: 80%;
}
You could also set the image to display: block and add padding, if it does not mess with your layout.

how to fix issue with images link on hover?

so i have 3 images they all are using the same code with different style of course first image is on left second image is in middle and third is on right.
bottom: 10;
left: 0;
right: 0;
position: fixed;
text-align: center;
margin: 0px auto;
okay so the issue i'm having is when you are to hover on the image it can only hover the pointer on either top part of the image but when hovering over the image on bottom then it detects no link at all.
sample of code for image I'm using
<a href="/"><img style="width: 130px; height: 130px; border: 0px; display: inline;" src="img">
</a>
All of the images are different sizes but one the first image i resized the image to like 150px width and 100 width height then the hover start working but i want the image to be hover on 100px width and 50px height and when i do that it only hovers over right side of the image and this image is the first image on left. Second image i tried resizing but it only hovers on top of the image. any help will be appreciated :)
There's a problem in your CSS. All of your <div>'s containing the anchor tags and the images have a fixed position along with left: 0 which is why they are overlapping. You can achieve what you're trying to do like this, I've modified the HTML and added new CSS:
#images {
text-align: center;
}
#images a:nth-child(2) {
display: inline-block;
float: left;
}
#images a:last-child {
display: inline-block;
float: right;
}
<div id="images"><img style="width: 100px; height: 100px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" />
<img style="width: 100px; height: 80px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" />
<img style="width: 100px; height: 80px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" /></div>
I dont know exactly your need, from my understand you can do it as follow:
Add this css styles and hover the image:
#img1 {
bottom: 10;
left:0;
right:0;
position: fixed;
text-align:center;
margin: 0px auto
z-index:1;
}
#img1 img:hover {
width:100px !important;
height:50px !important;}
Fiddle:http://jsfiddle.net/1hwm3epj/16/

Categories