Aspect Ratio Coding

Home Forums Porto – Responsive HTML5 Template Aspect Ratio Coding

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #10044964
    Minimal1964
    Participant

    Hey Guys,

    I am having trouble resizing images to fit in both the Architecture 2 template where at the top of the index page you have two images in a carousel and the Auto Services image at the top of the index page.

    I have tried adjusting with online tools or Photoshop and the problem (as you have indicated previously) is always the images that I am trying to use has an aspect ratio that does not work with the templates coding.

    I don’t have an option with these two templates that I am changing for clients because they have provided the photos.

    Can I change the code to allow the templates to automatically make the images fit when I import them and replace your blank images please? This would have to be responsive across devices please.

    If you could advise how I can do this going forward I will not have to reach out to you again on this subject.



    Template Version: Architecture 2 & Auto Services
    #10044966
    Support
    Keymaster

    Hello, I’m sorry but unfortunatelly it’s not possible, for both cases (Architecture 2 & Auto Services) you’re going to follow the original aspect ratio of the images and crop the images you want to use showing the most important part of the image. To change that you would have to make many more changes in the code and change the design itself of the template, which is not included in the support we provide here (customization for the buyer needs). The online crop tool that we suggested before is the best option: https://www.iloveimg.com/crop-image

    Thanks.


    #10044967
    Minimal1964
    Participant
    This reply has been marked as private.
    #10044968
    Support
    Keymaster

    Hello, it’s because that design was created that way, with a fixed aspect ratio for the images, not the standard pattern, like 800×600. You can change the way the images shows, changing background-size, background-repeat, etc… Like this:

    <div class="custom-slider-background overflow-hidden">
    	<div class="custom-slider-background-image-stage-outer appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1600">
    		<div class="custom-slider-background-image-stage">
    			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img1); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
    			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img2); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
    			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img3); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
    			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img4); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
    		</div>
    	</div>
    	<div class="custom-slider-background-image-stage-outer appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1600">
    		<div class="custom-slider-background-image-stage reverse">
    			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img4); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
    			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img3); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
    			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img1); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
    			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img2); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
    		</div>
    	</div>
    </div>

    It will make the image appear, showing all parts of the image (not cropped), but the design will be different, the area of the images will be different, the height will be smaller.

    Note: It’s impossible to show images with different aspect ratios in the same area showing all parts of the image.


    #10044969
    Minimal1964
    Participant
    This reply has been marked as private.
    #10044970
    Minimal1964
    Participant
    This reply has been marked as private.
    #10044972
    Support
    Keymaster
    This reply has been marked as private.
    #10044979
    Minimal1964
    Participant
    This reply has been marked as private.
    #10044983
    Support
    Keymaster
    This reply has been marked as private.
    #10044984
    Minimal1964
    Participant
    This reply has been marked as private.
    #10044985
    Support
    Keymaster
    This reply has been marked as private.
    #10044987
    Support
    Keymaster
    This reply has been marked as private.
    #10044989
    Minimal1964
    Participant
    This reply has been marked as private.
    #10044990
    Support
    Keymaster
    This reply has been marked as private.
    #10044991
    Minimal1964
    Participant
    This reply has been marked as private.
Viewing 15 posts - 1 through 15 (of 15 total)

This topic is marked as "RESOLVED" and can not rceive new replies.