I want to set the <img>'s height to use <h1></h1>'s height.
For example: the <h1></h1> height is 10em, so I want the <img>'s height is 10 em as well.
But the problem is I don't know the exact height of <h1></h1> on each web browser.
I tried to set <img>'s height in percents but it did't work. What should I do?
Here is my original code:
<div class="row" style="margin-top: 1%;">
<div class="large-9 columns">
<h1><img src="img/UnionJR.png"> English</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="large-3 columns">
<img src="http://placehold.it/350x150&text=Img">
</div>
</div>
Thanks
I tried this and this kind of works for Chrome. (I haven't tried with the others)
<h1><img src="img/UnionJR.png" style="height: 1em;"> English</h1>
It seems like a bad way to slove this problem but for brief work it will do.
Anyway, I still want to know other methods. Please add more!
Unless I'm missing something here, if your h1 has a specific height set e.g.
h1 {
height: 10em;
}
you should be able to use
h1 img {
height: 100%;
}
Percentage heights do work if their parent element has a specific height set.
Just tried this in chrome and it works - the image takes the height of the h1.
<html>
<body>
<div class="row" style="margin-top: 1%;">
<div class="large-9 columns">
<h1><img src="http://placehold.it/350x150&text=Img"> English</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="large-3 columns">
<img src="http://placehold.it/350x150&text=Img">
</div>
</div>
<style>
h1 {
height: 10em;
}
h1 img {
height: 100%;
}
</style>
</body>
</html>
I know this question is old, however I want to answer this for anyone looking for a solution like I was.
A solution I found worked was to use this css
.imgh1 {
background-image: image.png;
background-repeat: no-repeat;
background-size: contain;
}
And apply it to your header like this
<h1 class="imgh1"> </h1>
I would suggest setting a class for both the <h1> and the <img> tag.
Something like
<h1 class='tall'>
<img class='tall' src="img/UnionJR.png">
English
</h1>
with a style:
.tall {
height: 800px;
}
Keep in mind, however, that using em means that nested elements (if height is defined with em) will multiply by their parent height. So if your heading is 10 em, and your img is 10 em, the image will actually display at 100em or height. (10x10).
I would suggest using a pixel based height in this scenario, since it won't compound the way the em does.
You could add some rule to your CSS file for specific browser and overwrite the any style originally applied:
h1 {
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
You can use a fixed height for the <h1> tag and apply height: inherit; max-height: 100%; min-height: 100%; to the image to always keep them of same height. Just keep note that your image should be of specific dimensions to avoid the blurring on applying min and max height styles.
img {
height: inherit;
max-height: 100%;
min-height: 100%
}
h1 {
height: 50px;
}
DEMO
Related
Couldn't find anything about this so I ask this here:
I got a really simple page and wanted an element to be full width (width: 100vw). I noticed that at a smaller screen than around 300px it got smaller and wasn't actual full width.
No inserted a complete new div on top of all my html, gave it a background: black; with height: 100vh; and width: 100vw; and it's actually not the full screen size.
As you can see in my screenshot, the set "display size" is 352px x 778 and the element should be 352x778 (so exact the screensize), but as you can see it's smaller.
What causes this and how do I fix it? What is correct now? What I see or what the value says? It's pretty annoying.
If needed: I use chrome 89.0.4389.114 on macOS Big Sur Version 11.2.3 (20D91)
Added while inserting code: As I reduced the code to post it here, I see that the wrapper is the problem. But this question is still valid I believe. Why is the wrapper thats not connected with the <header> a problem for the viewport?
html,
body {
margin: 0;
}
.wrapper {
width: 380px;
margin: 0 auto;
}
.header {
background: black;
width: 100vw;
height: 100vh;
}
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header">
</div>
<div class="wrapper">
<div class="user">
<h2>
Lorem Ipsum,
<br> Lorem Ipsum Dolor sit amet!
</h2>
</div>
</div>
</body>
</html>
Has been stucked for 2 days, and I found that it is actually the zoom rate of chrome is affecting the element size under devTool's responsive model.
<img src="https://i.stack.imgur.com/dEdFF.png" style="width: 80vw;">
1
The zoom rate of your current brower is affecting the element size:
<img src="https://i.stack.imgur.com/MpAdd.png" style="width: 80vw;">
2
read more about scales in webpage with desktop browser or mobile browser
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
I've got this image here, Just a simple bootstrap website.
Heres the code for it. I've tired 100% height as you can see but its not working ,I'm wanting the black background to be full height of the screen.
<div class="col-md-8" style="background-color:#333333; height:100%">
<p style="color:white; padding-top:10%; font-size:80px" align="right">Some</p>
</div>
<div class="col-md-4" style="background-color:#ffffff;">
<p style="color:#333; padding-top:20%; font-size:80px">Text</p>
</div>
In order for percentage heights to work, there needs to be a height set on the parent element. If the height of the parent is a percentage, then it will require it's parent to have a height set on it also. This is the reason why simply applying html, body { height: 100%; } might/is not working - your element might not be a child of the <body> and therefore breaking the chain.
For example, does not work, chain is broken:
<html class="percentage-height-set">
<body class="percentage-height-set">
<div class="no-height-set">
<div class="no-height-set">
<div class="percentage-height-set"></div>
</div>
</div>
</body>
</html>
Works, chain is unbroken:
<html class="percentage-height-set">
<body class="percentage-height-set">
<div class="percentage-height-set"></div>
</body>
</html>
Since percentage heights require a height to be set on their parent element the math might look like this:
[parent height] * [percentage height of child] = [pixel height of child]
And what you're doing:
?? * .05 = ??
With a set height on parent:
500px * .05 = 25px
In css:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
Make sure, that your div isn't a child of another div
I am not good with javascript or jquery, so maybe i will get help here. I need script, which automatically find element height, and put that height as css style in div.
I made simpe hover (overlay) effect, but as you can see in demo, when i am hovering image, overlay effect shows in all div. I need, that overlay will be displayed only in image dimensions.
I found this script:
$(document).ready(function() {
$('.overlay').click (function () {
alert($(this).height());
});
});
But this script is not what i am searching for. It gives me height when i am clicking on the element. But how i can make it to show me automatically when page is loaded? How can i post height to div style?
HTML
<div class="item">
<img src="http://placekitten.com/450/550" class="image">
<a class="overlay" href="#">
<h3 class="title">Some title</h3>
<div class="description">
<p>
Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit.
</p>
</div>
</a>
<div class="information">
<span>Some information, long text... etc</span>
</div>
</div>
CSS
.overlay {
width: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
text-decoration: none;
color: #fff;
display: none;
}
DEMO http://codepen.io/anon/pen/raVLgV
Sorry for my BAD english, and thank you for any help.
in first: make sure the jQuery has beed loaded in document, so add follow code in demo
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
Second the script
window.onload = function() {
$('.overlay').css('height', $('.image').height() );
}
why no using $(document).ready() ?
because window.onload will run after DOM and image load completed.
$(document).ready() run just DOM load completed.
Demo http://codepen.io/anon/pen/azOmom
I'm working on a project, when you hover it you should click it. It works perfect in all browsers. But for some reason it doenst work in IE
Live Demo:
http://jewelbeast.com/imghover/rounded.html
HTML:
<div class="vertical-smallborder">
<section>
<img src="http://placehold.it/400x600" />
<div class="text">
<span>
<h1>This is a title</h1>
<p>This is an example of a description.</p>
<p>The entire image is a link!</p>
<a class="entire" href=""></a>
</span>
</div>
</section>
</div>
CSS:
div.vertical-noborder section span a.entire{
width: 100%;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
}
I hope someone knows the problem.
Your code is definitely more complicated than it needs to be-- unless there's some reason that you need to absolutely position elements, you shouldn't.
I believe there are two undesirable behaviors in your code in IE:
Margin-left: -250px in the div is pushing the element off-screen
The z-index of the elements is putting the img above the a tag. (link)
Rather than trying to fix these bugs in IE, rewrite what you have to wrap the img in the a tag.
I'd like to be able to position an image (blue) so that what ever size it is, it is always centered relative to the baseline of the div behind (red, not the containing div). The div behind will always be the same size/position.
Preferably this would be using css only as I'm using drupal and I don't know much about editing beyond the tpl files.
Thanks!
EDIT: Here's the layout http://pastebin.com/SisQHM4y
Hi you can do this pure css as like this
css
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 500px;
height: 400px;
background:green;
}
HTML
<div class="wraptocenter"><img src="//?" alt="images" /></div>
Live demo http://jsfiddle.net/rohitazad/tvrMp/
More information about this http://www.brunildo.org/test/img_center.html
Perhaps something like this:
<style>
#blue { margin-left:auto;margin-right:auto; }
</style>
<div id="red">
<div id="blue">
<img src="?" id="myImg" />
</div>
</div>
EDIT
I see, so you wish to center the x-axis horizontally, not vertically. And that link is a little messy. Perhaps you could try to
<style>
.user-picture { margin-top: auto; margin-bottom: auto; }
</style>
<div class="content">
<div class="profile" typeof="sioc:UserAccount" about="/users/diver1">
<div class="user-picture">
<a href="/users/diver1" title="View user profile." class="active">
<img typeof="foaf:Image" src="http://waterworksworldwide.com/sites/default/files/pictures/picture-126-1333572014.gif" alt="Diver1's picture" title="Diver1's picture" />
</a>
</div>
</div>
I am still having a little bit of a hard time seeing where the overlap between areas is as suggested by the red and blue in the question. If there is no overlap with my suggestion then please let me know and perhaps we can try to use some variations with position: absolute;