Maintain aspect ratio while resizing

Can you post the markup generated by your views for your sliders?

I had the same issue and the above fix worked.

This is the generated html:

<div
	class="block block-views contextual-links-region block-slideshow-block block-views-slideshow-block odd block-without-title"
	id="block-views-slideshow-block">
	<div class="block-inner clearfix">
		<div class="contextual-links-wrapper">
			<ul class="contextual-links">
				<li class="views-ui-edit first"><a
					href="/admin/structure/views/view/slideshow/edit/block?destination=node">Edit
						view</a></li>
				<li class="block-configure last"><a
					href="/admin/structure/block/manage/views/slideshow-block/configure?destination=node">Configure</a></li>
			</ul>
		</div>
		<div class="content clearfix">
			<div
				class="view view-slideshow view-id-slideshow view-display-id-block view-dom-id-76b3e458d118c41386b44c0083eada6c">



				<div class="view-content">
					<div id="flexslider-1" class="flex-flexslider flexslider">
						<ul class="slides">
							<li>
								<div class="views-field views-field-field-slide-image">
									<div class="field-content">
										<img typeof="foaf:Image"
											src="http://kickstart2.local/sites/default/files/styles/flexslider_full/public/slide/image/sd14-la-001.jpg?itok=SeHG0oyQ"
											width="800" height="500" alt="" />
									</div>
								</div>
							</li>
							<li>
								<div class="views-field views-field-field-slide-image">
									<div class="field-content">
										<img typeof="foaf:Image"
											src="http://kickstart2.local/sites/default/files/styles/flexslider_full/public/slide/image/sd14-la-002.jpg?itok=Y8Kq2Gg5"
											width="800" height="500" alt="" />
									</div>
								</div>
							</li>
							<li>
								<div class="views-field views-field-field-slide-image">
									<div class="field-content">
										<img typeof="foaf:Image"
											src="http://kickstart2.local/sites/default/files/styles/flexslider_full/public/slide/image/sd14-la-004.jpg?itok=nQkFNpIk"
											width="800" height="500" alt="" />
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>






			</div>
		</div>
	</div>
</div>

My issue with changing the selector from direct child to any child is that if you have another image in the slide which you want to retain a certain size it will be removed. Mind you, probably shouldn't be doing so with img tag attributes.

I'll mull it over.

To others with the same problem:

Flexslider assumes you have ul, li, and img directly nested without any divs in between. But Drupal/Views really (really, really) likes to wrap fields in divs.

You can change this by:
1) clicking your field, open 'Style settings', click 'Customize field HTML' en setting it to - None -.
2) clicking 'Settings' next to 'Fields' in 'Format' and uncheck 'Provide default field wrapper elements'

If you don't use fields, but you use 'Content', try using the Display Suite module. It has options to remove a lot of divs (I haven't tested it with flexslider yet).

#6 Works.

#6 works as long as your showing just an image. When you tell the image to link to content the anchor tag causes the same problem.

#1 works for me. Allows for link to content while maintaining aspect ratio.

I just want to confirm comment 8 - the fix in comment 6 is fine as long as your showing just an image. When you want the image to link somewhere (like you very often want with a slideshow), the problem is back.

I ended up editing sites/all/modules/flexslider/assets/js/flexslider.load.js (like in comment 1) but less intrusive - replacing

    $(this).find('ul.slides > li > img').removeAttr('height');
    $(this).find('ul.slides > li > img').removeAttr('width');

with

    $(this).find('ul.slides > li img').removeAttr('height');
    $(this).find('ul.slides > li img').removeAttr('width');

I confirm that #10 worked for me.

Here is a patch which handles that on the latest 2.x Dev version.

I haven't researched this thoroughly but I wonder if this is related to
https://drupal.org/node/1927818
Image Styles Have no affect on flexslide images.

The selector on the javascript may need to be adjusted as in #10. Though if we remove the child marker, we remove the height value from ALL images, not just the first one in the slide (or direct child images).

Maybe there's a better way or a way to tell the JS which images to clear the height attr from. Or just remove from all and assume that the images are set to the right size as #10 does.

Just want to throw in there that I was having issues with the aspect ratio, but I also had this issue https://drupal.org/node/2017219. I had a faulty installation, and reinstalling the module fixed everything!

EDIT: the reinstallation fixed the initially loaded image aspect ratio, but did not fix the resizing issue.

Patch at #11 doesn't seem to work (tried in in FF and Chrome)

My bad, seems to target the height and width attributes. All feels a bit delicate, though...

I can confirm this patch works with 7.x-2.0-alpha3

patch in 11 worked for me. I think this should be committed soon. It was a huge headache to try and fix in CSS until i found this thread :) thanks for this patch!

Well, it's confirmed by two users - setting issue to RTBC.