CODEWITHSUNDEEP
javascripthtmlcss
Steve Jobs
Steve Jobs

Reputation: 395

CSS to position image a percentage of another image

Say I have an image that has width

width: 100vw;

Is it possible to position a title say 50% of the way down from this image? I can't think of how to do it as the height will be changing based on the vw, so can this be done with CSS only, or do I need Javascript? Either way, how would I do this?

Thanks

Edit: I have tried the various suggestions below but it seems that whenever I try to use solely CSS with position:relative it messes up the rest of my code. Is there a javascript function, therefore, that can calculate the height of the image as a % of the page height, and then can I position my title at say 75% of the height of the image?

Upvotes: 1

Views: 2842

Answers (4)

rorymorris89
rorymorris89

Reputation: 1189

I'm not entirely sure if I've understood you correctly or not, but if you want to vertically centre a piece of text over the top of a responsive image, you could do this:

div {
  position: relative;
}
img {
  width: 100vw;
  height: auto;
}
p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
<div>
  <img src="https://unsplash.it/200/100/?random">
  <p>SOME TEXT</p>
</div>

https://jsfiddle.net/fjh6msqL/

Upvotes: 3

ajai Jothi
ajai Jothi

Reputation: 2294

With CSS margin:auto , max-height:0 with absolute position actually does the magic. this will center your title text perfectly regardless of screen size. Instead of giving title a width and height we can set top, left, right, bottom property to 0 which actually scale the element to its relative parent's size. Hope this helps.

body{
margin:0;
padding:0;
}
.img-placeholder{
  position:relative;
}
.img-placeholder img{
  width:100vw;
  height:auto;
}

.img-placeholder h2{
  position:absolute;
  margin:auto;
  top:0;
  right:0;
  bottom:0;
  left:0;
  max-height:0px;
  text-align:center;
}
<div class="img-placeholder">
      <img src="http://lorempixel.com/output/sports-q-c-640-480-2.jpg">
      <h2>Image Title</h2>
</div>

Upvotes: 0

Pejka
Pejka

Reputation: 141

You can't really do that with an image without using some Javascript. The best solution I think would be to use a div element and set it's background-image property to the image you want to display, and then position your title vertically inside the div. Something like this:

<div style="background: url('url-to-image') no-repeat; background-size: cover; background-position: center center;">
    <h2 class="title"></h2>
</div>

Vertical positioning can be tricky, but there are ways, for example: CSS Vertical align middle

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

Sure, add a parent around the image and set it to inline-block so that it will match the width of the image, add position: relative so that you can absolutely position your title text in relation to the parent, and then either add an element with your title text or use a pseudo element from the parent (that's what I did in this example) and absolutely position that 50% from the top, and use translateY(-50%) to move the image back up 50% of it's own height so it's in the middle of the image vertically. Here is a good article on how to center stuff using CSS https://www.w3.org/Style/Examples/007/center.en.html

div {
  display: inline-block;
  position: relative;
}
div:after {
  content: 'here is your title';
  color: white;
  background: black;
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
}
img {
  width: 100vw;
}
<div class="parent">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

Upvotes: 0

Related Questions