Я пытаюсь добавить тег <img> к <div>, например, JSFiddle но мне нужно отобразить только нижнюю левую четверть, а не только полную.

< Сильный > Разметка

<div id="myDiv"></div>

< Сильный > Javascript

imgUrl = "nerdist.com/wp-content/uploads/2018/02/oblivion-song-615x346.png"
$('#myDiv').prepend('<img id="theImg" style="width:100%;" src="https://' + imgUrl + '"/>');

Можно ли отобразить только часть изображения с картинки src?

-1
Dana 22 Фев 2018 в 17:15

3 ответа

Лучший ответ

Чтобы добиться того, что вы пытаетесь сделать, вам нужно стилизовать свой код для настройки изображения, показывая только ту четверть, которую вы хотите, позиционируя img как relative и используя top and left декальцировки. чтобы показать четверть (25%), мы будем прятаться (75%) в обоих направлениях.

Я включил живой образец для вас. проверить CSS, понять математику и изменить столько, сколько вы хотите. обратите внимание, что вы должны дать height img-обертке. без этого свойства top и left не будут работать.

Между тем, в вашем коде js изображение не может иметь фоновое изображение, вместо этого используйте атрибут src, чтобы указать местоположение изображения. Я надеюсь, что это решит вашу проблему

$(document).ready(function() {
    //create the image here
    var img = document.createElement('img');
    
    //listen for load event on the image.
    img.addEventListener('load', function(e) {
        var height = this.offsetHeight,
        width = this.offsetWidth;
        
        var hiddenheight = parseInt(0.75 * height),
        visibleheight = parseInt(0.25 * height),
        hiddenwidth = parseInt(0.75 * width);
        
        $(this).css({
            'top': '-' + hiddenheight + 'px',
            'right': '-' + hiddenwidth + 'px'
        });
        
        $('.img-wrapper').css({
            'max-height': visibleheight + 'px'
        });
    });
    $('.img-wrapper').append(img);
    $(img).attr({
       'src': 'http://fjsfoundations.com/image/global/tile.jpg',
       'alt': 'test image'
    });
});
.img-wrapper {
    overflow: hidden;
    background-color: blue;
    position: relative;
}

.img-wrapper > img {
    display: inline-block;
    height: 100%;
    width: 100%;
    position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div>
    <div class="img-wrapper"></div>
</div>
0
Harrison Ifeanyichukwu 22 Фев 2018 в 20:06

Попробуй это:

$("#mydiv").html("<img id="theImg" src="............" />");

И вы можете либо иметь тег img иметь предустановку CSS, либо вы можете сделать это в javascript, используя тот же метод, но используя

$("#mydiv").css(...........................);

Если тебе так понравится, я помогу тебе больше.

0
connor.gregson 22 Фев 2018 в 14:27

Вы не добавляете фон в img. Либо добавьте фон в div, либо добавьте <img src=""

$('#myDiv').prepend('<img id="theImg" src="https://' + imgUrl + '"/>');

Это будет prepend тег img, чтобы добавить его (присоединить к последнему), а затем использовать .append()

Возможно, вам придется стилизовать это изображение для правильного выравнивания, которое вы можете сделать, используя

#theImg{
   /* Your CSS here */
}
1
void 22 Фев 2018 в 14:17