Good evening.
Please see this PEN .
I would like my images to scale/position to remain relatively centered in their parent container as the page size narrows.
Thank you
What is the maximum amount of text that is likely to be in the column labeled Book Jacket?
I think we need more information as I donât see an image that needs centring? 
You may have some text that needs centring vertically in relation to the image but I donât see an image that needs alignment unless I am looking in the wrong place.
Your design is a little flawed in that you have used fixed heights in a number of places which means the book jacket text can never expand or be zoomed without breaking out of the box unless as Ron enquired that perhaps you only have a few words.
If you want the text to be at the vertical centre point of that image then the best way is to use the display:table and display table-cell properties and then vertical alignment is a cinch as all you need is vertical-align:middle on the table-cell.
If the text is minimal and text centering is desired, then the table/table-cell approach would be ideal and easy.
I chose to code for the (remote) possibility that the text might be longer, possibly long enough to wrap under the image, even.
In the demo, the OP also is using 500x500 images and cutting part of them away. They do not scale. I chose to put the images in the background and apply background-size:cover so he can use whatever image he wishes. It will scale and still fill the frame. He can even change the aspect ratio of the box a bit when it goes wide (as I did).
So I started with the image floating to the right; then, at the breakpoint, changed the layout to flexbox so I could change the order of the text and image.
The code looks a little scruffy because I kept the OPs box in the mix.
The upper box is mine and starts with class .workMod1. The CSS is grouped.
The lower box is the OPs original.
Just for funâŚ
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/image-scaling-positioning-in-fluid-responsive-layout/214043
based on
http://codepen.io/elCheapo/pen/YwjZaO
-->
<style type="text/css">
html {
width: 100%;
height: 100%;
box-sizing: border-box;
background-color:darkgrey;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
max-width:860px;
min-height:100%;
background-color:beige;
background-image:url(SVG/customKraft.png);
margin:0 auto;
}
h3 {
margin: 0;
}
section {
display: block;
}
.workWrap {
display: block;
margin:10% auto;
width: 80%;
height: 100%;
background-color: rgba(114, 114, 114, 0.22);
/* opacity: .2; */
padding: 20px;
font: 23px "Calibri";
overflow: auto;
}
.workWrap h3 {
font: 30px "Calibri", calibri, sans-serif;
border-bottom: 1px solid black;
}
.workWrap .workMod {
position: relative;
margin-top: 20px;
width: 100%;
height: 300px;
background-color: rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.workMod h4 {
float: left;
font:24px "Calibri", calibri, sans-serif;
margin: 5px 0 0px 5px;
}
.workMod .workSubH {
float:left;
clear: left;
font: 18px "Calibri", calibri, sans-serif;
margin: 0 0 5px 5px;
}
.workWrap .galIMGwpV {
position: absolute;
width: 70%;
height: 280px;
right: 10px;
top: 10px;
/* background-color: white; */
overflow: hidden;
}
.workWrap .galIMGwphV img {
display: block;
width: auto;
margin: 0 auto;
}
.workMod1 {
background-color: rgba(0, 0, 0, 0.25);
overflow:hidden;
margin-top: 20px;
}
.workMod1 h4 {
font:24px "Calibri", calibri, sans-serif;
margin: 5px 0 0px 5px;
}
.workMod1 .workSubH {
font: 18px "Calibri", calibri, sans-serif;
margin: 0 0 5px 5px;
}
.workMod1 .imgwrap {
width:70%;
float:right;
padding:10px;
}
.workMod1 a {
display:block;
padding-top:65%;
background-image:url("http://lorempixel.com/500/500/");
background-position:50% 20%;
background-size:cover;
}
@media screen and (max-width:778px) {
.workMod1 {
display:flex;
flex-direction:column;
}
.workMod1 .title {
order:1;
}
.workMod1 .image {
order:2;
}
.workMod1 .imgwrap {
width:100%;
padding:0;
}
.workMod1 a {
padding-top:50%;
}
.workWrap .galIMGwpV {
width: 65%;
}
}
@media screen and (max-width:680px) {
.workWrap .galIMGwpV {
width: 60%;
}
}
@media screen and (max-width:600px) {
.workWrap {
display: block;
margin:10% auto;
width: 90%;
height: 100%;
background-color: rgba(114, 114, 114, 0.22);
/* opacity: .2; */
padding: 20px;
font: 23px "Calibri";
overflow: auto;
}
.workWrap .galIMGwpV {
position: absolute;
width: 100%;
height: 350px;
top: 60px;
left: 0px
}
.workMod h4 {
float: left;
font:24px "Calibri", calibri, sans-serif;
margin: 5px 0 0px 5px;
}
}
</style>
</head>
<body>
<section class="workWrap">
<h3>Work Samples</h3>
<div class="workMod1">
<div class="image">
<div class="imgwrap">
<a class="galIMGwph" href="svg/nku24_sm.png"></a>
</div>
</div>
<div class="title">
<h4>Book Jacket</h4>
<p class="workSubH">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem.
</p>
</div>
</div>
<div class="workMod">
<h4>Book Jacket</h4>
<p class="workSubH">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.
</p>
<div class="galIMGwpV">
<a href="svg/nku24_sm.png"><img src="http://lorempixel.com/500/500/"/></a>
</div>
</div>
</section>
</body>
</html>
Before I get into the meat of your responses, @ronpat the solution you came up with changes the design of the workMod(ule). I would like to maintain some semblance of the visual design that I am basing the layout on.
Also, how is my code scruffy? Lol.
The mixture of your code and my code is scruffy since they address two distinctly different methods of laying out the page. Your code was introduced in a dedicated Pen. I could have put my code in a dedicated âworking pageâ; however, I chose to put our codes on the same page so one could compare the behaviors of the modules side-by-side. The âscruffinessâ is of my doing, not yours.
As I vaguely expressed in my post, my âsolutionâ is a shot in the dark, a guess, a foray into extreme possibilities, although I actually thought I stayed rather close to your visual design.
When you get the meat of my responses, be sure to relate them back to your requirements as stated in your Original Post so I will know where I departed from your request.
@ronpat, hope I didnât come across as cross (lol).
I do appreciate the effort. I was in a rush this AM.
centering in parent container (being .workMod) so as the container gets smaller the image (the image I want to user i wasnât able to figure out just yet how to link to codepen via google drive or flickr âany suggestions?â) which has a logo centered on white background would âanchorâ itself in the center of the given space, and the boundaries of .workMod would act as a mask.
Forget about the scaling for the time being.
What about the text???
How much room is needed for the text? How long is it likely to be? Should it be centered at narrow widths when it is over the image? or should it be left aligned?
Try this working page. I have attached a 500x500 test image for my box. Put it in the same folder as the working page. Your images are anchored at their top left corner. Mine are centered horizontally (50%) and offset 20% vertically (50% would be vertically middled). You can change those settings and see what happens.
Scaling is commented out. You can uncomment it to enable scaling.
Same deal⌠my box is on top, the relevant CSS is at the bottom.
Your box is on bottom.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>display:table/table-cell</title>
<!--
https://www.sitepoint.com/community/t/image-scaling-positioning-in-fluid-responsive-layout/214043
elCheapo(EricWest)
http://codepen.io/elCheapo/pen/YwjZaO
-->
<style type="text/css">
html {
width: 100%;
height: 100%;
box-sizing: border-box;
background-color:darkgrey;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
max-width:860px;
min-height:100%;
background-color:beige;
background-image:url(SVG/customKraft.png);
margin:0 auto;
}
h3 {
margin: 0;
}
section {
display: block;
}
.workWrap {
display: block;
margin:10% auto;
width: 80%;
height: 100%;
background-color: rgba(114, 114, 114, 0.22);
/* opacity: .2; */
padding: 20px;
font: 23px "Calibri";
overflow: auto;
}
.workWrap h3 {
font: 30px "Calibri", calibri, sans-serif;
border-bottom: 1px solid black;
}
.workWrap .workMod {
position: relative;
margin-top: 20px;
width: 100%;
height: 300px;
background-color: rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.workMod h4 {
float: left;
font:24px "Calibri", calibri, sans-serif;
margin: 5px 0 0px 5px;
}
.workMod .workSubH {
float:left;
clear: left;
font: 18px "Calibri", calibri, sans-serif;
margin: 0 0 5px 5px;
}
.workWrap .galIMGwpV {
position: absolute;
width: 70%;
height: 280px;
right: 10px;
top: 10px;
/* background-color: white; */
overflow: hidden;
}
.workWrap .galIMGwphV img {
display: block;
width: auto;
margin: 0 auto;
}
@media screen and (max-width:778px) {
.workWrap .galIMGwpV {
width: 65%;
}
}
@media screen and (max-width:680px) {
.workWrap .galIMGwpV {
width: 60%;
}
}
@media screen and (max-width:600px) {
.workWrap {
display: block;
margin:10% auto;
width: 90%;
height: 100%;
background-color: rgba(114, 114, 114, 0.22);
/* opacity: .2; */
padding: 20px;
font: 23px "Calibri";
overflow: auto;
}
.workWrap .galIMGwpV {
position: absolute;
width: 100%;
height: 350px;
top: 60px;
left: 0px
}
.workMod h4 {
float: left;
font:24px "Calibri", calibri, sans-serif;
margin: 5px 0 0px 5px;
}
}
/* workMod1 styles below this line using the display:table/table-cell technique */
.workMod1 {
display:table;
width:100%;
background-color: rgba(0, 0, 0, 0.25);
margin-top: 20px;
}
.workMod1 .imagewrap,
.workMod1 .titlewrap {
display:table-cell;
vertical-align:top;
}
.workMod1 .imagewrap {
padding:10px;
}
.workMod1 .titlewrap {
width:7.5em;
}
.workMod1 h4 {
font:24px "Calibri", calibri, sans-serif;
margin: 5px 0 0px 5px;
}
.workMod1 .workSubH {
font: 18px "Calibri", calibri, sans-serif;
margin: 0 0 5px 5px;
}
.workMod1 a {
display:block;
background-color:#fff;
background-position:50% 20%; /* horiz vert bgimage position */
/* background-size:cover; /* uncomment to allow scaling. Try It... you might like it :smile: */
padding-top:280px; /* height of image window */
}
.workMod1 .galIMGwph {
background-image:url("RCA_Indian_Head_test_pattern-500sq.png");
}
@media screen and (max-width:600px) {
.workMod1 {
display:block;
}
.workMod1 .titlewrap {
display:block;
width:auto;
}
.workMod1 .imagewrap {
display:block;
padding:0;
}
.workMod1 a {
padding-top:240px; /* height of image window */
}
}
</style>
</head>
<body>
<section class="workWrap">
<h3>Work Samples</h3>
<div class="workMod1">
<div class="titlewrap">
<h4>Book Jacket</h4>
<p class="workSubH">Description of work.</p>
</div>
<div class="imagewrap">
<a class="galIMGwph" href="svg/nku24_sm.png"></a>
</div>
</div>
<div class="workMod">
<h4>Book Jacket</h4>
<p class="workSubH">Description of work.</p>
<div class="galIMGwpV">
<a href="svg/nku24_sm.png"><img src="http://lorempixel.com/500/500/"/></a>
</div>
</div>
</section>
</body>
</html>
500x500 test image. Expected to be in same folder with the working page.
RCA_Indian_Head_test_pattern-500sq.png
Great! With just some slight modification to the following:
.workMod1 a {
display:block;
background-color:#fff;
background-position:50% 50%; /* horiz vert bgimage position */
background-size:cover; /* uncomment to allow scaling. Try It... you might like it :smile: */
padding-top:280px; /* height of image window */
}
.workMod1 .galIMGwph {
background-image:url("svg/nku24_sm.png");
background-size:contain;
background-repeat: no-repeat;
}
I was able to get it to basically where I want it.
Turns out the scaling wasnât horrible important.
I will have to analyze your table/table-cell solution and how/why
background-size:cover and background-size: contain are interacting the way they are.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.