I want to resize images on this page.
They have exactly the same properties and code but the first one is has width: auto.
This is the code of the first image (baby boy):
<div class="wp-block-image">
<figure class="aligncenter is-resized">
<img src="https://milkandmotherhood.com/wp-content/uploads/418900_10152030658650634_1604957331_n.jpg" alt="baby boy sleeping" class="wp-image-821" width="512" height="540"/>
</figure>
</div>
Here's the code of the second image (family):
<div class="wp-block-image">
<figure class="aligncenter is-resized">
<img src="https://milkandmotherhood.com/wp-content/uploads/414572_10101518238988742_677706630_o.jpg" alt="Family on the meadow smiling" class="wp-image-822" width="512" height="341"/>
</figure>
</div>
Both are the same, yet the first image has width:auto at the webpage.
What should I change?
Related
I need a little help with this template I have been using.
http://preview.themeforest.net/item/anchor-freelancer-creative-agency-portfolio/full_screen_preview/22433983
Its using Fancybox for the project section, which I am trying to change from displaying photos to playing videos on mouse hover.
can anyone help me out with changing the code from displaying photos to playing a video? thanks
this is the code for the one project
<div class="grid-item">
<figure class="reveal-effect se2-white wow perspective-box"><img src="images/works12.jpg" alt="Image">
<figcaption> <a data-fancybox="gallery" href="images/works12.jpg">
<div class="bg-color" data-background="#d4beb1"></div>
<!-- end bg-color -->
<div class="brand"> <img src="images/logo-brand.png" alt="Image"> </div>
<!-- end brand -->
<h5>Digital Creative Works</h5>
<small>WEB, UI-UX, CODING</small> </a> </figcaption>
</figure>
</div>
I'm new to html/css and am trying to make a straight-forward webpage, which is just several images centered horizontally, each on their own row. I ended up using Bootstrap's basic html template, and can't figure out what's wrong with the code below. My images are stuck on the left edge of the page. The only CSS I'm currently using is the default linked one: "css/bootstrap.min.css"
This is all that's currently in my body:
<div class=“container-fluid”>
<div class=“row”>
<img src="..." class=“img-responsive center-block”>
</div>
<div class=“row”>
<img src="..." class=“img-responsive center-block”>
</div>
</div>
Your quotation marks ("") seem to be broken in your img's class. Don't know what your actually using but change them to normal quotation marks and it should work.
<div class="container-fluid">
<div class="row">
<img src="..." class="img-responsive center-block">
</div>
<div class="row">
<img src="..." class="img-responsive center-block">
</div>
</div>
I'm having a bit of problem here.
I'm trying to display an image in a circle div (using bootstrap), that when hover, the picture becomes a gif, but if you take your mouse from over the picture, it is only a static image.
It works, almost, as it moves the picture and the frame around, and I can not find why.
Here it is http://jsfiddle.net/eve_mf/zmp7tnho/
<div class="container">
<div class="titleColumns col-md-24">
<h1>Meet Some Of <strong>Our Denison Experts</strong></h1>
<h2>We can have a line about the team</h2>
<div class="personPic col-md-6">
<div class="circleFrame"><img class="static img-circle alignleft wp-image-1008 size-full" src="http://motors06.denison-automotive.co.uk/denison/wp-content/uploads/2015/05/jules_sil5.png" alt="" width="120" height="120" />
<img class="animated img-circle alignleft wp-image-1008 size-full" src="http://motors06.denison-automotive.co.uk/denison/wp-content/themes/denison-automotive/images/jules_sil_gif.gif" alt="" width="120" height="120" /></div>
<span class="peopleName">Jules Perry</span>
<span class="peoplePos">The Thinker</span>
</div>
<div class="personPic col-md-6">
<div class="circleFrame"><img class="static img-circle alignleft wp-image-1012 size-full" src="http://motors06.denison-automotive.co.uk/denison/wp-content/uploads/2015/05/tessa_sil2.png" alt="" width="120" height="120" />
<img class="animated img-circle alignleft wp-image-1012 size-full" src="http://motors06.denison-automotive.co.uk/denison/wp-content/themes/denison-automotive/images/tessa_sil_gif.gif" alt="" width="120" height="120" /></div>
<span class="peopleName">Tessa Denison</span>
<span class="peoplePos">The Creative</span>
</div>
</div>
</div>
I'm just working with html and css
Any suggestions? I've tried to remove all the styles but even then, there is a movement between the pictures and are the same size..
Thank youuuu
In fact, you don't need to set a position at all.
.circleFrame:hover .animated {
display:block;
}
http://jsfiddle.net/zmp7tnho/4/
I recommend you to set border styles to circleFrame too - http://jsfiddle.net/d3z849y7/
It helps you with freezing borders.
I'm creating a responsive design for my movie portal using Bootstrap 2.
I want to make the image height on a level with the other pictures. When i manually set picture height then it looks beautiful and all pictures are on the level with the other pictures.
But when I open website on tablet, then all the pictures look compressed!
Example 1:
If I remove height from pictures, then pictures are not on the same level with the other and looks bad.
Example 2:
Maybe you have idea how to fix it?
HTML:
<div class="span2 item all">
<div class="picframe img-polaroid">
<span class="overlay">
<span class="info-area">
<a class="img-icon-url" href="/movie"></a>
</span>
<span class="pf_text">
<span class="project-name">Movie Name</span>
<span>Genre</span>
</span>
</span>
<img data-original="pictur.jpg" src="picture.jpg" alt="" class="poster"/>
</div>
</div>
CSS:
.poster {
width:170px;
height:226px;
}
You might use Bootstrap 3 because it's very easy to make responsive image:
Responsive images
<img src="..." class="img-responsive" alt="Responsive image">
jQuery Scrollable (with the navigator plugin) is showing the wrong slide when it first loads.
It behaves normally when I use it like this:
$(".scrollable").scrollable({}).navigator();
…but as soon I enable the 'circular' mode (to allow looping from the final slide back to the first):
$(".scrollable").scrollable({ circular: true }).navigator();
on page load, the final item is the first one show, even though item 1 is highlighted in the navigator. If you go through the images, when you get to the final one, it's shown a second time, and you only see the actual first image at the beginning of the second loop.
Any suggestions?
Here's my HTML for completeness:
<div class="column two-thirds scrollable" id="scrollable">
<a class="prev browse left">Previous</a>
<div class="items">
<div><img src="1.jpg" alt="" /></div>
<div><img src="2.jpg" alt="" /></div>
<div><img src="3.jpg" alt="" /></div>
<div><img src="4.jpg" alt="" /></div>
</div>
<a class="next browse right">Next</a>
<div class="naviWrapper">
<div class="navi"></div>
</div>
</div>
Here is a link to the same issue, suggesting that you replace your <img> tags with <div> tags that have a background image.
https://github.com/jquerytools/jquerytools/issues/47
I could not do that as some of my images had image maps. However, all my images had the same dimensions, so I put in image dimensions, i.e.
<img width=730 height=360 alt="first image" src="/images/my-image.jpg" />
And that seems to have solved it.