[英]WordPress resize images for mobile devices
在WordPress的帖子中,我有这个HTML标签。
<img class="size-full wp-image-761" src="http://domain.com/wp-content/uploads/2016/09/couple.jpg" width="650" height="433" />
哪个渲染产生
<img class="size-full wp-image-761" src="http://domain.cloudfront.net/wp-content/uploads/2016/09/couple.jpg" width="650" height="433" srcset="http://domain.cloudfront.net/wp-content/uploads/2016/09/couple.jpg 650w, http://d14x51nv4ivcb0.cloudfront.net/wp-content/uploads/2016/09/couple-300x200.jpg 300w" sizes="(max-width: 650px) 100vw, 650px">
当我在PC上的浏览器中查看页面时一切都很好,但是当我查看手机上的页面时是不正确的。 图像对于屏幕而言太大,所以我只看到图像的左侧部分,我无法将页面向右移动以查看图像的其余部分。
在多台设备上查看时如何处理图像大小调整?
尝试这个:
<img class="size-full wp-image-761" src="http://domain.com/wp-content/uploads/2016/09/couple.jpg" width="100%"/>
我刚刚将width
属性更改为100%
。
在functions.php中添加此代码当您将图像添加到发布内容时,它将删除图像的宽度高度属性。
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10, 3 );
function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}
现在在style.css文件中添加以下css
img{
max-width:100%;
height:auto;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.