html - CSS: Two Logos aligned to the left and to the right which should autoscale by window resize -


i have 2 logos on website should go on top of website. 1 logo should aligned left , second logo right. when browser window gets pushed smaller, space in between 2 logos should narrower , when 2 logos "hit" each other, both supposed scale smaller without breaking line.

right left logo scales down , right logo breaks line , gets pushed lower without scaling down @ all.

can me?

my css:

.image-wrapper {  position: relative;  white-space: nowrap; }  .scale-image {  display: block;  width: auto;  max-width: 55%;  white-space: nowrap;

}

here html code:

<div class="image-wrapper"> <a href="#" ><img src="http://www.drogies-test.de/wp-content/uploads/2016/05/logo_oskar.jpg" align="left" class="scale-image"/></a> <div />  <div class="image-wrapper"> <a href="#" target="_blank" ><img src="http://www.drogies-test.de/pics/logo_theater_os.gif" align="right" class="scale-image"/></a> <div />

example link: http://www.drogies-test.de/header_show.html

i've adjusted mark-up structure nest elements correctly.

.image-wrapper:first-of-type,.image-wrapper:nth-child(1) {      float: left;  }    .image-wrapper:last-of-type,.image-wrapper:nth-child(2) {      float: right;  }    .image-wrapper {      max-width: 50%;  }    .scale-image {      width: 100%;      height: auto;  }
<body>    <div class="image-wrapper">      <a href="http://www.drogies-test.de/"><img src="http://www.drogies-test.de/wp-content/uploads/2016/05/logo_oskar.jpg" align="left" class="scale-image"></a>    </div>    <div class="image-wrapper">      <a href="http://www.theater-osnabrueck.de/" target="_blank"><img src="http://www.drogies-test.de/pics/logo_theater_os.gif" align="right" class="scale-image"></a>     </div>  </body>

here's flex solution:

.image-wrapper {      max-width: 50%;  }    .scale-image {      width: 100%;      height: auto;  }    .flex-wrapper {      display: flex;      justify-content: space-between;  }
<div class="flex-wrapper">    <div class="image-wrapper">      <a href="http://www.drogies-test.de/"><img src="http://www.drogies-test.de/wp-content/uploads/2016/05/logo_oskar.jpg" align="left" class="scale-image"></a>    </div>    <div class="image-wrapper">      <a href="http://www.theater-osnabrueck.de/" target="_blank"><img src="http://www.drogies-test.de/pics/logo_theater_os.gif" align="right" class="scale-image"></a>     </div>  </div>

note flex not supported in legacy browsers ie 8 , 9, , older versions of webkit browsers safari , firefox (a deprecated or hybrid syntax variation supported instead).

learn more: caniuse.com


-

Popular posts from this blog

Apache NiFi ExecuteScript: Groovy script to replace Json values via a mapping file -

i working apache nifi 0.5.1 on groovy script replace incoming json values ones contained in mapping file. mapping file looks (it simple .txt): header1;header2;header3 a;some text;a2 i have started following: import groovy.json.jsonbuilder import groovy.json.jsonslurper import java.nio.charset.standardcharsets def flowfile = session.get(); if (flowfile == null) { return; } flowfile = session.write(flowfile, { inputstream, outputstream -> def content = """ { "field1": "a" "field2": "a", "field3": "a" }""" def slurped = new jsonslurper().parsetext(content) def builder = new jsonbuilder(slurped) builder.content.field1 = "a" builder.content.field2 = "some text" builder.content.field3 = "a2" outputstream.write(builder.toprettystring().ge...
Read more

node.js - How do I prevent MongoDB replica set from querying the primary? -

read-operations-only: is there way have mongodb replica set, make mongodb instance on box connected to, mongodb gets queried? i have 3 ec2 instances behind aws load balancer. on each ec2 instance runs mongodb, part of replica set. i have express endpoints on nodejs , connect replica set follows mongodb.mongoclient.connect('mongodb://1.1.1.1,2.2.2.2,3.3.3.3.', function (err, db) { if (err) { complete('{}'); } else { i distribute load of queries evenly across 3 instances of mongodb replica set instead of default having queries routed ec2 instance primary mongodb defined, because destroys point of load balancer (which balance load of queries across 3 instances evenly). my understanding when connecting mongodb replica set, primary instance selected unless primary instance down, , therefore purpose of every secondary instance serve backup. in example people call hot,cold,cold. because there 2...
Read more