The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> How to keep images stretching and scaling to 100% width, whilst maintaining all other CSS
benjambennett
post Jun 20 2016, 08:50 AM
Post #1





Group: Members
Posts: 1
Joined: 20-June 16
Member No.: 24,349
Hi everyone,

first post and time trying with html/css properly. I've built a relatively simple holding page and am struggling to maintain its alignment and structure upon different zooms/screen sizes.

Problem = 2 out of my 5 images are automatically scaling down when I zoom in to keep all my images at 100% width of the screen. What do I need to do to keep all the images consistent in size and shape, maintaining 100% width of the page, regardless of zoom/screen size?

I do not want my images to drop (wrap?) down to the next line, I want them to span 100% of the page and maintain their inline form. What I need to achieve is for them to grow/shrink as is appropriate depending on the zoom/screen size.

Can anybody help?! I am posting the full HTML and CSS code below! I've also attached both HTML/CSS files - you'll see exactly what I mean if you zoom in/out or resize the browser window. Thank you so much for any help here, really desperate!



HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact Us</title>
<link type="text/css" link rel="stylesheet" href="campus.css">
</head>

<body>

<div id="wrapper">

<div id="header">
</div>

<div class="campus-logo">
<img src="http://www.campus-group.com/wp-content/uploads/2016/06/Campus_Group_Logo_pink-copy.png" />
</div>

<div class="top-text">
<p>A global youth agency, specialising in reaching students through<br> creative <p style="color:#ec018c; font-weight: 400">brand experiences</p> <p>and</p> <p style="color:#ec018c; ; font-weight: 400">integrated campaigns.</p>
</div>

<div class="gallery">

<div data-content="CAMPUS CREATE" class="image1">
<img src="http://www.campus-group.com/wp-content/uploads/2016/06/CG1-1.jpg">
</div>


<div data-content="CAMPUS AMBASSADORS" class="image2">
<img src="http://www.campus-group.com/wp-content/uploads/2016/06/CG4-1.jpg">
</div>

<div data-content="CAMPUS LIVE" class="image3">
<img src="http://www.campus-group.com/wp-content/uploads/2016/06/CG2-1.jpg">
</div>

<div data-content="CAMPUS DIGITAL" class="image4">
<img src="http://www.campus-group.com/wp-content/uploads/2016/06/CG3-1.jpg">
</div>

<div data-content="CAMPUS MEDIA" class="image5">
<img src="http://www.campus-group.com/wp-content/uploads/2016/06/CG5-1.jpg">
</div>

</div>

<div class="contact-us"><strong>CONTACT<p style="color:white">_</p></strong> <span>US</span>
</div>

<table border="0px";>
<tbody>

<tr>
<td><div id="blue">Sydney</div></td>
<td><div id="blue">London</div></td>

</tr>

<tr>
<td>490 Crown Street</td>
<td width="250">71 Fanshaw Street</td>
</tr>

<tr>
<td>Surry Hills</td>
<td>Hoxton</td>
</tr>

<tr>
<td>NSW 2010</td>
<td>N1 6LA</td>
</tr>

<tr>
<td><br></td>
<td><br></td>
</tr>

<tr>
<td>0479 193 715</td>
<td>0800 694 4200</td>
</tr>

<tr>
<td><a style="color: black" href="mailto:todd.rodgerson@campusgroup.com">todd.rodgerson@campusgroup.com</a></td>
<td><a style="color: black" href="mailto:hello@campusgroup.co.uk">hello@campus-group.co.uk</a></td>
</tr>

</tbody>

</table>

</div>

<div id="footer">

<div id="copyright">copyright © all rights reserved</div>
<div id="footer-logo"><img src="http://www.campus-group.com/wp-content/uploads/2016/06/Campus_Group_Logo_Secondary-copy.png">
</div>
</div>

</body>
</html>




CSS

p {
font-family: Helvetica;
font-weight: lighter;
color: black;
display: inline;
font-size: 0.7rem;
}

#header {
padding-top: 10px;
}

.campus-logo {
float: left;
margin-left: 45px;
margin-top: 12px;
}

.top-text {
float: right;
text-align: left;
padding-top: 46px;
line-height: 0.8em;
width: 400px;
}

span {
color: #ec018c;
font-family: Helvetica;
font-weight: lighter;
}

.gallery {
float: left;
width: 100%;
max-width: 100%;
position: absolute;
top: 135px;
left: -10px;
overflow: hidden;
justify-content: center;
display: inline-flex;
flex-grow: 100;
}

.image1 {
display: inline;
flex-wrap: nowrap;
float: left;
position: relative;
font-size: 2.5rem;
background-size: 100%;
}

.image1 img {
width: 100%;
vertical-align: top;
}

.image1: after, {
position:absolute;
opacity:0.75;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}

.image1:after {
content: attr(data-content);
color:#ffffff;
font-family: Helvetica;
position:absolute;
width:100%; height:66%;
top:0; left:0;
background:#ec008c;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.3s;
text-align: center;
}

.image1:hover:after {
opacity: 0.75;
padding-top: 112px;
text-align: center;
}

.image2 {
display: inline;
flex-wrap: nowrap;
float: left;
position: relative;
font-size: 2.2rem;
background-size: 100%;
}

.image2 img {
width: 100%;
vertical-align: top;
}

.image2:after {
content: attr(data-content);
color:#fff;
font-family: Helvetica;
position:absolute;
width:100%; height:66%;
top:0; left:0;
background:#ec008c;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.3s;
text-align: center;
}

.image2:hover:after {
opacity:0.75;
padding-top: 112px;
text-align: center;
}

.image3 {
display: inline;
flex-wrap: nowrap;
float: left;
position: relative;
font-size: 2.65rem;
background-size: 100%;
}

image3 img {
width: 100%;
vertical-align: top;
}

.image3:after {
content: attr(data-content);
color:#fff;
font-family: Helvetica;
position:absolute;
width:100%; height:66%;
top:0; left:0;
background:#ec008c;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.3s;
text-align: center;
}

.image3:hover:after {
opacity:0.75;
padding-top: 112px;
text-align: center;
}

.image4 {
display: inline;
flex-wrap: nowrap;
float: left;
position: relative;
font-size: 2.65rem;
background-size: 100%;
}

image4 img {
width: 100%;
vertical-align: top;
}

.image4:after {
content: attr(data-content);
color:#fff;
font-family: Helvetica;
position:absolute;
width:100%; height:66%;
top:0; left:0;
background:#ec008c;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.3s;
text-align: center;
}

.image4:hover:after {
opacity:0.75;
padding-top: 112px;
text-align: center;
}

.image5 {
display: inline;
flex-wrap: nowrap;
float: left;
position: relative;
font-size: 2.65rem;
background-size: 100%;
}

image5 img {
width: 100%;
vertical-align: top;
}

.image5:after {
content: attr(data-content);
color:#fff;
font-family: Helvetica;
position:absolute;
width:100%; height:66%;
top:0; left:0;
background:#ec008c;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.3s;
text-align: center;
}

.image5:hover:after {
opacity:0.75;
padding-top: 112px;
text-align: center;}

#blue {
font-family: Helvetica;
font-weight:bolder;
font-size: 1.3rem;
color: #709da7;
}

#copyright {
font-family: Helvetica;
font-weight: lighter;
top: 81px;
float: left;
color: dimgrey;
font-size: 0.7rem;
position:absolute;
padding-left: 10px;
}

#footer-logo {
float: right;
padding-top: 21px;
padding-right: 17px;
}

#content {
padding-bottom:100px;
}

#footer {
background:#ecefef;
width:100%;
height:100px;
position:absolute;
top: 1000px
bottom:0;
left:0;
border-top: 1px solid grey;
}

.contact-us {
font-family: Helvetica;
font-size: 1.4rem;
position: absolute;
top: 546px;
right: 270px;
width: 100%;
display: inline-flex;
justify-content: center;

}

#wrapper {
min-height:100%;
position:relative;
}

html,
body {
margin:0px;
padding:0;
height:116%;
}

table {
font-family: Helvetica;
font-weight: lighter;
font-size: 0.8rem;
position: absolute;
top: 585px;
left: 0px;
width: 100%;
display: inline-flex;
justify-content: center;
border-collapse:collapse;
table-layout: fixed;
}

table, th, td {
-webkit-column-width: 400px; /* Chrome, Safari, Opera */
-moz-column-width: 400px; /* Firefox */
column-width: 340px;
}



Attached File(s)
Attached File  campus.css ( 4.92k ) Number of downloads: 267
Attached File  Campus.html ( 3.61k ) Number of downloads: 283
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 1 2016, 07:27 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
Sorry for late reply. Not sure what's causing it, but when I simplified the CSS it went away. I tried something like:

CODE
.image1, .image2, .image3, .image4, .image5 {
display: inline;
flex-wrap: nowrap;
float: left;
position: relative;
background-size: 100%;
}

.image1 img, .image2 img, .image3 img, .image4 img, .image5 img {
width: 100%;
vertical-align: top;
}

.image1 { font-size: 2.5rem;}
.image2 { font-size: 2.2rem;}
.image3 { font-size: 2.65rem;}
.image4 { font-size: 2.65rem;}
.image5 { font-size: 2.65rem;}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 06:30 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC