I made a logo in svg and implemented it on my website. It works well in all browsers EXCEPT safari
Here is a fiddle
NOTE - you muse use safari to recreate my issue. Viewing the fiddle in any other browser shows it like its suppose to be.
Here is my html for the navbar
<div class="navsection">
<div class="w-nav navbar" data-collapse="medium" data-animation="default" data-duration="400" data-contain="1">
<div class="w-container">
<a class="w-nav-brand" href="#">
<img class="logo" src="https://dl.dropboxusercontent.com/u/66131799/JA_logo_2014_svg.svg" width="100">
</a>
<nav class="w-nav-menu mobilenavmenu" role="navigation"><a class="w-nav-link navlinks" href="#work">work</a><a class="w-nav-link navlinks" href="#contact">contact</a>
</nav>
<div class="w-nav-button">
<div class="w-icon-nav-menu hamburger"></div>
</div>
</div>
</div>
</div>
What is causing this to happen?
You can get started with
preserveAspectRatio="xMinYMin meet" in your svg header
but I cant verify this without your svg on the fiddle
Your css
img {
display: block;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.w-nav-brand {
display: inline-block;
position: relative;
width: 50%;
padding-bottom: 60%;
}
The 60% needs tuning depending on size and width.
I've used this guide a lot, to good effect, but more with the object tag than img.
Try to trim the amount of css included in your fiddle, you'll get more interest!
Related
I currently have a blog page in Wordpress where my original images are all different sizes. I am having trouble getting the image thumbnails on my blog home page to all be the same width and height without stretching the image and also being able to remain responsive when resizing the screen.
Current blog page can be seen at http://studio10interiordesign.com/blog-2/
Current html:
<article class="slide-entry flex_column post-entry post-entry-3536 slide-entry-overview slide-loop-2 slide-parity-even av_one_third real-thumbnail" itemscope="itemscope" itemtype="https://schema.org/BlogPosting" itemprop="blogPost">
<img width="495" height="400" src="http://studio10interiordesign.com/wp-content/uploads/2018/03/1260-S-Bellaire-Denver-CO-print-002-1-Clubhouse-2700x1800-300dpi-495x400.jpg" class="attachment-portfolio size-portfolio wp-post-image" alt="" srcset="http://studio10interiordesign.com/wp-content/uploads/2018/03/1260-S-Bellaire-Denver-CO-print-002-1-Clubhouse-2700x1800-300dpi-495x400.jpg 495w, http://studio10interiordesign.com/wp-content/uploads/2018/03/1260-S-Bellaire-Denver-CO-print-002-1-Clubhouse-2700x1800-300dpi-845x684.jpg 845w" sizes="(max-width: 495px) 100vw, 495px"><span class="image-overlay overlay-type-extern" style="left: -5px; top: 0px; overflow: hidden; display: block; height: 261px; width: 333px;"><span class="image-overlay-inside"></span></span>
<div class="slide-content">
<header class="entry-content-header">
<h3 class="slide-entry-title entry-title" itemprop="headline">My Hygge</h3>
<span class="blog-categories minor-meta">
Uncategorized
</span>
<span class="av-vertical-delimiter"></span>
</header>
<div class="slide-entry-excerpt entry-content" itemprop="text"></div>
</div>
</article>
<article class="slide-entry flex_column post-entry post-entry-3436 slide-entry-overview slide-loop-3 slide-parity-odd post-entry-last av_one_third real-thumbnail" itemscope="itemscope" itemtype="https://schema.org/BlogPosting" itemprop="blogPost">
<img width="495" height="330" src="http://studio10interiordesign.com/wp-content/uploads/2017/03/Historic-Remodel-1home-image_Large-1.jpg" class="attachment-portfolio size-portfolio wp-post-image" alt="" srcset="http://studio10interiordesign.com/wp-content/uploads/2017/03/Historic-Remodel-1home-image_Large-1.jpg 2048w, http://studio10interiordesign.com/wp-content/uploads/2017/03/Historic-Remodel-1home-image_Large-1-300x200.jpg 300w, http://studio10interiordesign.com/wp-content/uploads/2017/03/Historic-Remodel-1home-image_Large-1-768x512.jpg 768w, http://studio10interiordesign.com/wp-content/uploads/2017/03/Historic-Remodel-1home-image_Large-1-1024x683.jpg 1024w, http://studio10interiordesign.com/wp-content/uploads/2017/03/Historic-Remodel-1home-image_Large-1-700x466.jpg 700w" sizes="(max-width: 495px) 100vw, 495px"><span class="image-overlay overlay-type-extern"><span class="image-overlay-inside"></span></span>
<div class="slide-content">
<header class="entry-content-header">
<h3 class="slide-entry-title entry-title" itemprop="headline">Sui Generis: A person or thing that is unique, in a class by itself.</h3>
<span class="blog-categories minor-meta">
Uncategorized </span><span class="av-vertical-delimiter">
</span>
</header>
<div class="slide-entry-excerpt entry-content" itemprop="text"></div>
</div>
</article>
CSS
.avia-content-slider .slide-image, .avia-content-slider .slide-image img {
border-radius: 3px;
display: block;
position: relative;
-webkit-perspective: 1000px;
-webkit-backface-visibility: hidden;
margin: 0 auto;
vertical-align: middle;
}
I've thought about adding width: 100% and height: 255px or height: auto but defining a set pixel height seems to stretch some images and I don't want that, especially when resizing the screen. The auto property doesn't seem to give the same height to all images, so I can't use that either.
Any info is appreciated.
Dependens on your css file, you have a two ways to solve it:
Just add the width and height witch you want to give for image show size (fast, but no the good solution for responsive site);
Wrapp the image tag in the support div tag with given width and height for it in your category layout file of WP theme.
For first case, just add to your css file:
.avia-content-slider .slide-image, .avia-content-slider .slide-image img {
border-radius: 3px;
display: block;
position: relative;
-webkit-perspective: 1000px;
-webkit-backface-visibility: hidden;
margin: 0 auto;
width: 100%;
height: 200px;
}
For second solution try:
<div style=" width: 100%; height: 200px; ">
<img width="495" height="400" src="http://studio10interiordesign.com/wp-
content/uploads/2018/03/image006-495x400.png" class="attachment-portfolio
size-portfolio wp-post-image" alt="">
</div>
with css for img tag:
.avia-content-slider .slide-image, .avia-content-slider .slide-image img {
border-radius: 3px;
display: block;
position: relative;
-webkit-perspective: 1000px;
-webkit-backface-visibility: hidden;
margin: 0 auto;
position: relative;
min-height: 100%;
min-width: 100%;
top: -50%;
}
Basically there is no way you can resize all images to the same size and at the same time, maintain their ratios and layouts. However, there is a couple of techniques to make the images look pretty fine and not pixelated.
Using the image as a background, if you have a container with fixed height and width, use the image as a background together with background-size: cover will make sure that the image will always be automatically resized to fit inside the container. background-position then can also be used to move the background image inside the container and display the most prominent part.
Using object-fit. This css property will cut off the sides of the image, preserving the aspect ratio, and also filling in the space. However, it is only supported in IE 16, so if you need to support older versions, it might be a problem.
seem to be having issues with my pure css parallax, im using the concept from this article. However this doesn't seem to be working for me at all.
Am I going about it all wrong?
You can inspect my code using a debugger here.
Edit:
Sorry I though providing the link would let you inspect the code easier rather than read and try and understand pasted code snippets.
I want to have parallax effects on sections of my website.
Here you can see my HTML, there are more parts but im currently trying to get my header working with a parallax scrolling background:
<body class="parallax">
<header class="parallax__group">
<div class="parallax__layer parallax__layer--back darken"></div>
<div class="parallax__layer parallax__layer--base flex alignvcenter">
<div id="hdr-logo">
<img src="images/logo.svg" alt="Mobile Paint Solutions" class="responsive-img">
</div>
<div id="hdr-hint">
<img src="" alt="" class="responsive-img">
</div>
<div id="hdr-nav">
<nav>
<span>Home</span>
<span>About</span>
<span>Gallery</span>
<span>Reviews</span>
<span>Pricing</span>
<span>Contact</span>
</nav>
</div>
</div>
</header>
And here are my LESS styles:
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__group {
position: relative;
height: 100vh;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
transform: translateZ(-2px) scale(3);
}
However currently the background is not moving at all, can anyone explain this?
I believe the reason the effect (parallax or not) does not work is because you used <body> as the host element. Probably some of the properties it uses have no effect on <body>. I assume we're talking perspective and its vendor prefixed counterparts.
The obvious fix is to use a <div> as host, not <body>. I tried to use some styles and images from the website you linked, but it doesn't look too good. You got the idea though.
Adding
background-attachment: fixed;
to your
<div class="parallax__layer parallax__layer--back darken"></div>
or actually class named
parallax__layer--back
fixed the thing.
Edit: (http://i.imgur.com/rV1CDho.png) this works, gentleman.
I have a responsive image list. Each image is inside a container.
I want the image container to be 75% of its first container (unit container in this case)
the image ration is 1:1
I played a little with the image container percentage width but it feels like this is not the solution.
<ul class="list-inline unit_list ">
<li class="unit_list_item col-xs-24 col-sm-12 col-md-8">
<a href='#' alt="unit">
<div class="unit_container">
<div class="icon_container unit_icon">
<img class="img-responsive unit_image" src="http://placehold.it/60X60" />
</div>
<div class="unit_name">FREE</div>
</div>
</a>
</li></ul>
Btw, I'm using bootstrap if that's matter.
http://jsfiddle.net/wmu3w3ej/1/
Thanks to #Mary Melody
transform: scale(0.75);
works like magic
I'm a little afraid to use it since it's so simple.
any thoughts?
Using the logic from here: https://stackoverflow.com/a/20117454/3389737
I have applied it to your situation: http://jsfiddle.net/phwaLmen/1/
#wrapper
{
position: relative;
width: 50%;
overflow: hidden;
}
#wrapper:before
{
content: "";
display: block;
padding-top: 75%;
}
#image
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
<div id="wrapper">
<img src="http://placehold.it/350x350" id="image">
</div>
Add relative positioning to the parent, set its width as you'd like and make sure the overflow is hidden.
Create a :before element for the wrapper with a padding-top of 75%. Since there is no height specified for the #wrapper, this 75% is based on the width of the element :)
Then you have your image, positioned absolutely and then fitted to the container. If you want the image to be cropped instead of resized, remove the height: 100% and width: 100% style rules from it.
You can do it like this (in your html):
<img src="img.jpg" height="75%" />
Good luck!
I am just finishing a small website and noticed in IE7 that the logo is hiding behind an image on the home page: http://reapvalue.com/
Here is the html:
<div id="wrap">
<div id="header">
<ul id="main-nav">
<li>About</li>
<li>What We Do</li>
<li class="last">Contact</li>
</ul>
<h1><img id="logo" src="/photos/logo.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></h1>
<h1><img id="logo-small" src="/photos/logo-small.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></h1>
</div><!-- end #header -->
<div id="tagline">
<span class="green">renewable energy</span> <span class="magenta">and preservation</span>
</div>
<div id="main" class="clearfix">
<div id="Stage" class="EDGE-909290339"></div>
<img id="lead-image" src="photos/hickory.jpg" alt="hickory, nc preserveration district">
Here is the CSS:
#header { width: 960px; height: 53px; margin: 0 auto; position: relative; }
body#inside #header { height: 56px; }
img#logo { position: absolute; top: 0; left: 0; z-index: 5000; }
Despite setting the z-index to 5000 it still hides behind the image. Any help in getting the logo to the front will be greatly appreciated.
Thanks.
I can't really explain why, but z-index in IE7 and IE8 acts weird.
If you're using z-index, and want it to work in older IE browsers, you need to make sure your parent element has an heigher z-index then your element.
For example, give your #header a z-index: 6000; and it'll be fixed.
I hope someone can give you an better explanation as to why this works, as I would like to know aswell myself.
EDIT: I've googled abit and found this interesting post:
http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
I have a menu bar in which each button is an image floated to the right. It looks perfect in Safari, FF, and Chrome but in IE7 the buttons are grouped fine, but they appear about 50 pixels lower than the other browsers (out of the menu bar). Any tips on how to fix this? Thank you!
http://jsfiddle.net/mE2b8/
My CSS:
#menu {
width: 100%;
height: 58px;
background-color: #00653a;
}
#menu_mid {
width: 823px;
height: 58px;
margin: 0px auto;
background-color: #00653a;
}
.menu_links {
float: right;
display: inline;
}
HTML:
<div id="menu">
<div id="menu_mid">
<img src="assets/img/menu_rrt.gif" alt="RRT"/>
<img src="assets/img/menu_contact.gif" alt="Contact" class="menu_links"/>
<img src="assets/img/menu_news.gif" alt="Contact" class="menu_links"/>
<img src="assets/img/menu_about.gif" alt="Contact" class="menu_links"/>
<img src="assets/img/menu_home.gif" alt="Contact" class="menu_links"/>
</div>
</div>
The problem seems to be that the logo (or graphic with alt="RRT") does not have a width defined. I added an ID to the img element and then floated it left. Seems to be what you're looking for: http://jsfiddle.net/mE2b8/3/