Fluid x2 Content Images

Discussion in 'HTML & Website Design' started by KewL, Feb 13, 2016.

0
  1. #1
    Wondering if theres a better way to do this.

    Basically I have a container (lets say its max-width: 700px). Inside that container i have a 1000px (@x2) image. The max width the image should ever be shown at is 500px (1000/2) or 100% of the container width (if the container shrinks smaller than 500px).

    Hard to explain but hopefully you understand. Is there a clean way to handle this? The only way I could figure out is putting a width attribute on the <img> tag at 1/2 it's natural dimensions then in css putting max-width 100%.

    There's no standard image sizes and it'd be a pain in the ass declaring the width in css. Is there anyway to do this with no hard-coded dimensions?
     
    KewL, Feb 13, 2016 IP
  2. denis bayly

    denis bayly Well-Known Member

    Messages:
    110
    Likes Received:
    29
    Best Answers:
    6
    Trophy Points:
    105
    #2
    Hi there KewL,

    try it like this...

    

<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<link rel="stylesheet" href="page.css" media="screen">

<style media="screen">
body {
    background-color:#f0f0f0;
 }
#image-container {
    width:100%;
    max-width:700px;
    padding:1%;
    margin:auto;
    border:1px solid #999;
    box-sizing:border-box;
    background-color:#fff;
 }
#image-container img {
    float:left;
    width:49%;
    margin:0.5% 
    border:1px solid #000; 
    box-sizing:border-box;
 }  
</style>

</head>
<body>

<div id="image-container">
 <img src="http://placehold.it/500x310" alt="">
 <img src="http://placehold.it/500x310" alt="">
</div>

</body>
</html>
    Code (markup):

    coothead
     
    denis bayly, Feb 14, 2016 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,279
    Likes Received:
    1,696
    Best Answers:
    31
    Trophy Points:
    475
    #3
    I pretty much stopped using the background: url() no-repeat; thingy to accommodate retina displays. Right or wrong, I don't give a f*ck, what I do works:

    css
    
.example {
max-width: 100%;
height: auto;
}
    Code (markup):
    html
    
<img src="images/your_image.gif" width="500" height="350" class="example">
    Code (markup):
    It's fluid / responsive and yet you can give it whatever initial detentions you want. But maybe I am totally amiss here. Just thought I'd throw it in anyway.
     
    qwikad.com, Feb 14, 2016 IP
  4. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #4
    Thanks for your replies!

    @denis bayly Yeah, I guess that first method works too. Not a big fan of wrapping every <img> in an div though.

    @qwikad.com Yeah that's what I've been doing for the past few months, just trying to see other alternatives.

    Starting to sound like there's only 3 html/css options: Extra div, width attribute, or hard coded css widths. Was playing with scale, but it leaves a bunch of white space.
     
    KewL, Feb 14, 2016 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    You could reverse width and max-width... it seems to calculate "smoother" in terms of draw speed and any scaling effects applied, and I've no idea why.

    width:100%; max-width:500px;

    Seems to do it just as good as the max-width:100% with the width in the markup in terms of the result, and seems to work faster. Of course it also lets you skip declaring width and height in the markup if desired which if you have a LOT of content images is sometimes worth the reflow in terms of server load since you don't have to use something like GD to pull the image size first.
     
    deathshadow, Feb 14, 2016 IP